/* Commerce OS Workbench — compiled design tokens.
   Generated from tokens.json. Do not edit by hand.

   Themes are selected with data-theme on a wrapper element:
     [data-theme="claude-plus"]     -> Claude + · Light
     [data-theme="claude-plus-dark"] -> Claude + · Dark
     [data-theme="classic"]         -> Classic · Light
     [data-theme="classic-dark"]    -> Classic · Dark
     [data-theme="supabase"]        -> Supabase · Light
     [data-theme="supabase-dark"]   -> Supabase · Dark
     [data-theme="newlook"]         -> New Look · Light
     [data-theme="newlook-dark"]    -> New Look · Dark

   :root carries claude-plus, the app default.
   Inside the Next app these same values already come from app/globals.css —
   load this file only on surfaces that do not have it. */

@font-face {
  font-family: "Geist";
  src: url("fonts/geist-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/dm-sans-latin-var.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/playfair-display-latin-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-var.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Claude + · Light — default */
:root,
[data-theme="claude-plus"] {
  /* colour */
  --background: oklch(0.9818 0.0054 95.0986);
  --foreground: oklch(0.3438 0.0269 95.7226);
  --card: oklch(0.9665 0.0067 97.3521);
  --card-foreground: oklch(0.1908 0.0020 106.5859);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.2671 0.0196 98.9390);
  --primary: oklch(0.6171 0.1375 39.0427);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.9245 0.0138 92.9892);
  --secondary-foreground: oklch(0.4334 0.0177 98.6048);
  --muted: oklch(0.9341 0.0153 90.2390);
  --muted-foreground: oklch(0.5341 0.0078 97.4503);
  --accent: oklch(0.9245 0.0138 92.9892);
  --accent-foreground: oklch(0.2671 0.0196 98.9390);
  --destructive: oklch(0.1908 0.0020 106.5859);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.8847 0.0069 97.3627);
  --input: oklch(0.7621 0.0156 98.3528);
  --ring: oklch(0.6171 0.1375 39.0427);
  --chart-1: oklch(0.5583 0.1276 42.9956);
  --chart-2: oklch(0.6898 0.1581 290.4107);
  --chart-3: oklch(0.8816 0.0276 93.1280);
  --chart-4: oklch(0.8822 0.0403 298.1792);
  --chart-5: oklch(0.5608 0.1348 42.0584);
  --score-excellent: hsl(158 64% 38%);
  --sidebar: oklch(0.9663 0.0080 98.8792);
  --sidebar-foreground: oklch(0.3590 0.0051 106.6524);
  --sidebar-primary: oklch(0.6171 0.1375 39.0427);
  --sidebar-primary-foreground: oklch(0.9881 0 0);
  --sidebar-accent: oklch(0.9245 0.0138 92.9892);
  --sidebar-accent-foreground: oklch(0.3250 0 0);
  --sidebar-border: oklch(0.9401 0 0);
  --sidebar-ring: oklch(0.7731 0 0);
  --warning-soft: hsl(36 65% 57% / 0.12);
  --warning-border: hsl(36 65% 57% / 0.30);
  --warning-text: hsl(28 60% 30%);
  --danger-soft: hsl(2 50% 48% / 0.10);
  --danger-border: hsl(2 50% 48% / 0.30);
  --danger-text: hsl(2 55% 35%);
  --success-soft: hsl(156 44% 33% / 0.10);
  --success-border: hsl(156 44% 33% / 0.30);
  --success-text: hsl(156 44% 24%);
  /* elevation */
  --shadow-2xs: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.03);
  --shadow-xs: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.03);
  --shadow-sm: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.05), 0px 1px 2px -2px hsl(210 29.7297% 14.5098% / 0.05);
  --shadow: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.05), 0px 1px 2px -2px hsl(210 29.7297% 14.5098% / 0.05);
  --shadow-md: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.05), 0px 2px 4px -2px hsl(210 29.7297% 14.5098% / 0.05);
  --shadow-lg: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.05), 0px 4px 6px -2px hsl(210 29.7297% 14.5098% / 0.05);
  --shadow-xl: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.05), 0px 8px 10px -2px hsl(210 29.7297% 14.5098% / 0.05);
  --shadow-2xl: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.13);
}

/* Claude + · Dark */
[data-theme="claude-plus-dark"] {
  /* colour */
  --background: oklch(0.2679 0.0036 106.6427);
  --foreground: oklch(0.9576 0.0027 106.4494);
  --card: oklch(0.2928 0.0018 106.5092);
  --card-foreground: oklch(0.9818 0.0054 95.0986);
  --popover: oklch(0.3085 0.0035 106.6039);
  --popover-foreground: oklch(0.9211 0.0040 106.4781);
  --primary: oklch(0.6724 0.1308 38.7559);
  --primary-foreground: oklch(0.1908 0.0020 106.5859);
  --secondary: oklch(0.9818 0.0054 95.0986);
  --secondary-foreground: oklch(0.3085 0.0035 106.6039);
  --muted: oklch(0.2213 0.0038 106.7070);
  --muted-foreground: oklch(0.7713 0.0169 99.0657);
  --accent: oklch(0.2130 0.0078 95.4245);
  --accent-foreground: oklch(0.9663 0.0080 98.8792);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.3618 0.0101 106.8928);
  --input: oklch(0.4336 0.0113 100.2195);
  --ring: oklch(0.6724 0.1308 38.7559);
  --chart-1: oklch(0.5583 0.1276 42.9956);
  --chart-2: oklch(0.6898 0.1581 290.4107);
  --chart-3: oklch(0.2130 0.0078 95.4245);
  --chart-4: oklch(0.3074 0.0516 289.3230);
  --chart-5: oklch(0.5608 0.1348 42.0584);
  --score-excellent: hsl(152 55% 52%);
  --sidebar: oklch(0.2357 0.0024 67.7077);
  --sidebar-foreground: oklch(0.8074 0.0142 93.0137);
  --sidebar-primary: oklch(0.3250 0 0);
  --sidebar-primary-foreground: oklch(0.9881 0 0);
  --sidebar-accent: oklch(0.1680 0.0020 106.6177);
  --sidebar-accent-foreground: oklch(0.8074 0.0142 93.0137);
  --sidebar-border: oklch(0.9401 0 0);
  --sidebar-ring: oklch(0.7731 0 0);
  --warning-soft: hsl(36 65% 57% / 0.15);
  --warning-border: hsl(36 65% 57% / 0.35);
  --warning-text: hsl(36 70% 70%);
  --danger-soft: hsl(2 50% 48% / 0.15);
  --danger-border: hsl(2 50% 48% / 0.35);
  --danger-text: hsl(2 62% 72%);
  --success-soft: hsl(156 44% 33% / 0.15);
  --success-border: hsl(156 44% 33% / 0.35);
  --success-text: hsl(151 35% 65%);
  /* elevation */
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.15);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.15);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.30), 0px 1px 2px -1px hsl(0 0% 0% / 0.30);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.30), 0px 1px 2px -1px hsl(0 0% 0% / 0.30);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.30), 0px 2px 4px -1px hsl(0 0% 0% / 0.30);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.30), 0px 4px 6px -1px hsl(0 0% 0% / 0.30);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.30), 0px 8px 10px -1px hsl(0 0% 0% / 0.30);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.75);
}

/* Classic · Light */
[data-theme="classic"] {
  /* colour */
  --background: hsl(240 6.6667% 97.0588%);
  --foreground: hsl(210 29.7297% 14.5098%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(210 29.7297% 14.5098%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(210 29.7297% 14.5098%);
  --primary: hsl(201.0811 68.0982% 31.9608%);
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(214.2857 21.2121% 93.5294%);
  --secondary-foreground: hsl(210 29.7297% 14.5098%);
  --muted: hsl(214.2857 21.2121% 93.5294%);
  --muted-foreground: hsl(213.6000 12.1951% 40.1961%);
  --accent: hsl(202.8571 38.1818% 89.2157%);
  --accent-foreground: hsl(200.6897 74.3590% 22.9412%);
  --destructive: hsl(2.4194 50.8197% 47.8431%);
  --destructive-foreground: hsl(0 0% 100%);
  --border: hsl(212.7273 18.0328% 88.0392%);
  --input: hsl(212.7273 18.0328% 88.0392%);
  --ring: hsl(200.8264 67.5978% 35.0980%);
  --chart-1: hsl(200.8264 67.5978% 35.0980%);
  --chart-2: hsl(201.0000 67.5676% 70.9804%);
  --chart-3: hsl(200.9639 67.4797% 24.1176%);
  --chart-4: hsl(156 44.3787% 33.1373%);
  --chart-5: hsl(36.5957 64.9770% 57.4510%);
  --score-excellent: hsl(158 64% 38%);
  --sidebar: hsl(216.0000 21.7391% 95.4902%);
  --sidebar-foreground: hsl(210 29.7297% 14.5098%);
  --sidebar-primary: hsl(201.0811 68.0982% 31.9608%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(202.8571 38.1818% 89.2157%);
  --sidebar-accent-foreground: hsl(200.6897 74.3590% 22.9412%);
  --sidebar-border: hsl(212.7273 18.0328% 88.0392%);
  --sidebar-ring: hsl(200.8264 67.5978% 35.0980%);
  --warning-soft: hsl(36 65% 57% / 0.12);
  --warning-border: hsl(36 65% 57% / 0.30);
  --warning-text: hsl(28 60% 30%);
  --danger-soft: hsl(2 50% 48% / 0.10);
  --danger-border: hsl(2 50% 48% / 0.30);
  --danger-text: hsl(2 55% 35%);
  --success-soft: hsl(156 44% 33% / 0.10);
  --success-border: hsl(156 44% 33% / 0.30);
  --success-text: hsl(156 44% 24%);
  /* elevation */
  --shadow-2xs: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.03);
  --shadow-xs: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.03);
  --shadow-sm: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.05), 0px 1px 2px -2px hsl(210 29.7297% 14.5098% / 0.05);
  --shadow: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.05), 0px 1px 2px -2px hsl(210 29.7297% 14.5098% / 0.05);
  --shadow-md: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.05), 0px 2px 4px -2px hsl(210 29.7297% 14.5098% / 0.05);
  --shadow-lg: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.05), 0px 4px 6px -2px hsl(210 29.7297% 14.5098% / 0.05);
  --shadow-xl: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.05), 0px 8px 10px -2px hsl(210 29.7297% 14.5098% / 0.05);
  --shadow-2xl: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.13);
}

/* Classic · Dark */
[data-theme="classic-dark"] {
  /* colour */
  --background: hsl(210 25% 7.8431%);
  --foreground: hsl(213.3333 20.9302% 91.5686%);
  --card: hsl(214.2857 24.1379% 11.3725%);
  --card-foreground: hsl(213.3333 20.9302% 91.5686%);
  --popover: hsl(215.2941 23.2877% 14.3137%);
  --popover-foreground: hsl(213.3333 20.9302% 91.5686%);
  --primary: hsl(202.3256 47.7778% 64.7059%);
  --primary-foreground: hsl(210 25% 7.8431%);
  --secondary: hsl(213.3333 23.0769% 15.2941%);
  --secondary-foreground: hsl(213.3333 20.9302% 91.5686%);
  --muted: hsl(213.3333 23.0769% 15.2941%);
  --muted-foreground: hsl(215.5556 12.4424% 57.4510%);
  --accent: hsl(213.3333 23.0769% 15.2941%);
  --accent-foreground: hsl(200.3390 51.3043% 77.4510%);
  --destructive: hsl(2.6087 62.1622% 63.7255%);
  --destructive-foreground: hsl(4 51.7241% 5.6863%);
  --border: hsl(214.2857 20.7921% 19.8039%);
  --input: hsl(214.2857 20.7921% 19.8039%);
  --ring: hsl(202.3256 47.7778% 64.7059%);
  --chart-1: hsl(202.3256 47.7778% 64.7059%);
  --chart-2: hsl(200.3390 51.3043% 77.4510%);
  --chart-3: hsl(201.7699 52.5581% 57.8431%);
  --chart-4: hsl(151.7241 34.6614% 50.7843%);
  --chart-5: hsl(36.8571 75.2688% 63.5294%);
  --score-excellent: hsl(152 55% 52%);
  --sidebar: hsl(213.3333 29.0323% 6.0784%);
  --sidebar-foreground: hsl(213.3333 20.9302% 91.5686%);
  --sidebar-primary: hsl(202.3256 47.7778% 64.7059%);
  --sidebar-primary-foreground: hsl(210 25% 7.8431%);
  --sidebar-accent: hsl(213.3333 23.0769% 15.2941%);
  --sidebar-accent-foreground: hsl(200.3390 51.3043% 77.4510%);
  --sidebar-border: hsl(213.3333 23.0769% 15.2941%);
  --sidebar-ring: hsl(202.3256 47.7778% 64.7059%);
  --warning-soft: hsl(36 65% 57% / 0.15);
  --warning-border: hsl(36 65% 57% / 0.35);
  --warning-text: hsl(36 70% 70%);
  --danger-soft: hsl(2 50% 48% / 0.15);
  --danger-border: hsl(2 50% 48% / 0.35);
  --danger-text: hsl(2 62% 72%);
  --success-soft: hsl(156 44% 33% / 0.15);
  --success-border: hsl(156 44% 33% / 0.35);
  --success-text: hsl(151 35% 65%);
  /* elevation */
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.15);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.15);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.30), 0px 1px 2px -1px hsl(0 0% 0% / 0.30);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.30), 0px 1px 2px -1px hsl(0 0% 0% / 0.30);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.30), 0px 2px 4px -1px hsl(0 0% 0% / 0.30);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.30), 0px 4px 6px -1px hsl(0 0% 0% / 0.30);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.30), 0px 8px 10px -1px hsl(0 0% 0% / 0.30);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.75);
}

/* Supabase · Light */
[data-theme="supabase"] {
  /* colour */
  --background: oklch(0.9911 0 0);
  --foreground: oklch(0.2046 0 0);
  --card: oklch(0.9911 0 0);
  --card-foreground: oklch(0.2046 0 0);
  --popover: oklch(0.9911 0 0);
  --popover-foreground: oklch(0.4386 0 0);
  --primary: oklch(0.8348 0.1302 160.9080);
  --primary-foreground: oklch(0.2626 0.0147 166.4589);
  --secondary: oklch(0.9940 0 0);
  --secondary-foreground: oklch(0.2046 0 0);
  --muted: oklch(0.9461 0 0);
  --muted-foreground: oklch(0.2435 0 0);
  --accent: oklch(0.9461 0 0);
  --accent-foreground: oklch(0.2435 0 0);
  --destructive: oklch(0.5523 0.1927 32.7272);
  --destructive-foreground: oklch(0.9934 0.0032 17.2118);
  --border: oklch(0.9037 0 0);
  --input: oklch(0.9731 0 0);
  --ring: oklch(0.8348 0.1302 160.9080);
  --chart-1: oklch(0.8348 0.1302 160.9080);
  --chart-2: oklch(0.6231 0.1880 259.8145);
  --chart-3: oklch(0.6056 0.2189 292.7172);
  --chart-4: oklch(0.7686 0.1647 70.0804);
  --chart-5: oklch(0.6959 0.1491 162.4796);
  --score-excellent: hsl(158 64% 38%);
  --sidebar: oklch(0.9911 0 0);
  --sidebar-foreground: oklch(0.4386 0 0);
  --sidebar-primary: oklch(0.8348 0.1302 160.9080);
  --sidebar-primary-foreground: oklch(0.2626 0.0147 166.4589);
  --sidebar-accent: oklch(0.9461 0 0);
  --sidebar-accent-foreground: oklch(0.2435 0 0);
  --sidebar-border: oklch(0.9037 0 0);
  --sidebar-ring: oklch(0.8348 0.1302 160.9080);
  --warning-soft: hsl(36 65% 57% / 0.12);
  --warning-border: hsl(36 65% 57% / 0.30);
  --warning-text: hsl(28 60% 30%);
  --danger-soft: hsl(2 50% 48% / 0.10);
  --danger-border: hsl(2 50% 48% / 0.30);
  --danger-text: hsl(2 55% 35%);
  --success-soft: hsl(156 44% 33% / 0.10);
  --success-border: hsl(156 44% 33% / 0.30);
  --success-text: hsl(156 44% 24%);
  /* elevation */
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
}

/* Supabase · Dark */
[data-theme="supabase-dark"] {
  /* colour */
  --background: oklch(0.1822 0 0);
  --foreground: oklch(0.9288 0.0126 255.5078);
  --card: oklch(0.2046 0 0);
  --card-foreground: oklch(0.9288 0.0126 255.5078);
  --popover: oklch(0.2603 0 0);
  --popover-foreground: oklch(0.7348 0 0);
  --primary: oklch(0.4365 0.1044 156.7556);
  --primary-foreground: oklch(0.9213 0.0135 167.1556);
  --secondary: oklch(0.2603 0 0);
  --secondary-foreground: oklch(0.9851 0 0);
  --muted: oklch(0.2393 0 0);
  --muted-foreground: oklch(0.7122 0 0);
  --accent: oklch(0.3132 0 0);
  --accent-foreground: oklch(0.9851 0 0);
  --destructive: oklch(0.3123 0.0852 29.7877);
  --destructive-foreground: oklch(0.9368 0.0045 34.3092);
  --border: oklch(0.2809 0 0);
  --input: oklch(0.2603 0 0);
  --ring: oklch(0.8003 0.1821 151.7110);
  --chart-1: oklch(0.8003 0.1821 151.7110);
  --chart-2: oklch(0.7137 0.1434 254.6240);
  --chart-3: oklch(0.7090 0.1592 293.5412);
  --chart-4: oklch(0.8369 0.1644 84.4286);
  --chart-5: oklch(0.7845 0.1325 181.9120);
  --score-excellent: hsl(152 55% 52%);
  --sidebar: oklch(0.1822 0 0);
  --sidebar-foreground: oklch(0.7122 0 0);
  --sidebar-primary: oklch(0.4365 0.1044 156.7556);
  --sidebar-primary-foreground: oklch(0.9213 0.0135 167.1556);
  --sidebar-accent: oklch(0.3132 0 0);
  --sidebar-accent-foreground: oklch(0.9851 0 0);
  --sidebar-border: oklch(0.2809 0 0);
  --sidebar-ring: oklch(0.8003 0.1821 151.7110);
  --warning-soft: hsl(36 65% 57% / 0.15);
  --warning-border: hsl(36 65% 57% / 0.35);
  --warning-text: hsl(36 70% 70%);
  --danger-soft: hsl(2 50% 48% / 0.15);
  --danger-border: hsl(2 50% 48% / 0.35);
  --danger-text: hsl(2 62% 72%);
  --success-soft: hsl(156 44% 33% / 0.15);
  --success-border: hsl(156 44% 33% / 0.35);
  --success-text: hsl(151 35% 65%);
  /* elevation */
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.09);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.43);
}

/* New Look · Light */
[data-theme="newlook"] {
  /* colour */
  --background: #ffffff;
  --foreground: #1c1c1c;
  --card: #ffffff;
  --card-foreground: #1c1c1c;
  --popover: #ffffff;
  --popover-foreground: #1c1c1c;
  --primary: #e60b6b;
  --primary-foreground: #ffffff;
  --secondary: #f5f5f5;
  --secondary-foreground: #1c1c1c;
  --muted: #f5f5f5;
  --muted-foreground: #6b6b6b;
  --accent: #fdeaf3;
  --accent-foreground: #b00852;
  --destructive: #b3261e;
  --destructive-foreground: #ffffff;
  --border: #e5e5e5;
  --input: #e0e0e0;
  --ring: #e60b6b;
  --chart-1: #e60b6b;
  --chart-2: #1c1c1c;
  --chart-3: #f48fb8;
  --chart-4: #6b6b6b;
  --chart-5: #b00852;
  --score-excellent: hsl(158 64% 38%);
  --sidebar: #fafafa;
  --sidebar-foreground: #1c1c1c;
  --sidebar-primary: #e60b6b;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #fdeaf3;
  --sidebar-accent-foreground: #b00852;
  --sidebar-border: #e5e5e5;
  --sidebar-ring: #e60b6b;
  --warning-soft: hsl(36 65% 57% / 0.12);
  --warning-border: hsl(36 65% 57% / 0.30);
  --warning-text: hsl(28 60% 30%);
  --danger-soft: hsl(2 50% 48% / 0.10);
  --danger-border: hsl(2 50% 48% / 0.30);
  --danger-text: hsl(2 55% 35%);
  --success-soft: hsl(156 44% 33% / 0.10);
  --success-border: hsl(156 44% 33% / 0.30);
  --success-text: hsl(156 44% 24%);
  /* elevation */
  --shadow-2xs: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.03);
  --shadow-xs: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.03);
  --shadow-sm: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.05), 0px 1px 2px -2px hsl(210 29.7297% 14.5098% / 0.05);
  --shadow: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.05), 0px 1px 2px -2px hsl(210 29.7297% 14.5098% / 0.05);
  --shadow-md: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.05), 0px 2px 4px -2px hsl(210 29.7297% 14.5098% / 0.05);
  --shadow-lg: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.05), 0px 4px 6px -2px hsl(210 29.7297% 14.5098% / 0.05);
  --shadow-xl: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.05), 0px 8px 10px -2px hsl(210 29.7297% 14.5098% / 0.05);
  --shadow-2xl: 0px 1px 4px -1px hsl(210 29.7297% 14.5098% / 0.13);
}

/* New Look · Dark */
[data-theme="newlook-dark"] {
  /* colour */
  --background: #141414;
  --foreground: #f5f5f5;
  --card: #1c1c1c;
  --card-foreground: #f5f5f5;
  --popover: #232323;
  --popover-foreground: #f5f5f5;
  --primary: #ff4d94;
  --primary-foreground: #1c1c1c;
  --secondary: #232323;
  --secondary-foreground: #f5f5f5;
  --muted: #232323;
  --muted-foreground: #a3a3a3;
  --accent: #3a1526;
  --accent-foreground: #ff8fbd;
  --destructive: #f2665c;
  --destructive-foreground: #1c1c1c;
  --border: #2e2e2e;
  --input: #2e2e2e;
  --ring: #ff4d94;
  --chart-1: #ff4d94;
  --chart-2: #f5f5f5;
  --chart-3: #f48fb8;
  --chart-4: #a3a3a3;
  --chart-5: #ff8fbd;
  --score-excellent: hsl(152 55% 52%);
  --sidebar: #0f0f0f;
  --sidebar-foreground: #f5f5f5;
  --sidebar-primary: #ff4d94;
  --sidebar-primary-foreground: #1c1c1c;
  --sidebar-accent: #3a1526;
  --sidebar-accent-foreground: #ff8fbd;
  --sidebar-border: #2e2e2e;
  --sidebar-ring: #ff4d94;
  --warning-soft: hsl(36 65% 57% / 0.15);
  --warning-border: hsl(36 65% 57% / 0.35);
  --warning-text: hsl(36 70% 70%);
  --danger-soft: hsl(2 50% 48% / 0.15);
  --danger-border: hsl(2 50% 48% / 0.35);
  --danger-text: hsl(2 62% 72%);
  --success-soft: hsl(156 44% 33% / 0.15);
  --success-border: hsl(156 44% 33% / 0.35);
  --success-text: hsl(151 35% 65%);
  /* elevation */
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.15);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.15);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.30), 0px 1px 2px -1px hsl(0 0% 0% / 0.30);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.30), 0px 1px 2px -1px hsl(0 0% 0% / 0.30);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.30), 0px 2px 4px -1px hsl(0 0% 0% / 0.30);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.30), 0px 4px 6px -1px hsl(0 0% 0% / 0.30);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.30), 0px 8px 10px -1px hsl(0 0% 0% / 0.30);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.75);
}

/* theme-independent */
:root {
  /* spacing */
  --space-0.5: 2px;
  --space-1: 4px;
  --space-1.5: 6px;
  --space-2: 8px;
  --space-2.5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-16: 64px;
  --rail-width: 56px;
  --shell-width: 220px;
  /* radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 9999px;
  /* opacity */
  --opacity-disabled: 0.5;
  --opacity-sidebar-icon: 0.7;
  --opacity-sidebar-icon-muted: 0.6;
  --opacity-track: 0.25;
  --opacity-hairline: 0.6;
  /* families */
  --font-sans: Geist, ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-outfit: Outfit, ui-sans-serif, system-ui, sans-serif;
  --font-display: "Playfair Display", ui-serif, Georgia, serif;
  --font-dm-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

/* Type styles. Prefixed `type-` so they cannot collide with app classes;
   the artifact's own generated tokens.css uses the bare style names. */
.type-metric {
  font-family: var(--font-serif);
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.type-page-title {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.type-section-title {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.type-subhead {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.type-body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}
.type-body-strong {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}
.type-small {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}
.type-micro {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
}
.type-lead {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}
.type-label-caps {
  font-family: var(--font-sans);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.type-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  line-height: 14px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.type-badge {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.025em;
}
.type-overline {
  font-family: var(--font-sans);
  font-size: 8.5px;
  line-height: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.type-pill {
  font-family: var(--font-sans);
  font-size: 9px;
  line-height: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.type-score {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.type-chiclet {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.type-data {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.type-code {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}