/*
 * Flux design tokens: the ONE canonical source of color, type, radius,
 * shadow and layout values. Components never hard-code colors; Tailwind
 * aliases in index.css (@theme inline) point at these variables.
 * Colors are space-separated HSL triplets: use hsl(var(--token)).
 * See DESIGN_SYSTEM.md at the repo root.
 */
:root {
  color-scheme: light;

  /* Neutrals: near-white surfaces, near-black ink */
  --background: 240 6% 97%;
  --foreground: 240 8% 10%;
  --card: 240 20% 99.6%;
  --card-foreground: 240 8% 10%;
  --card-border: 240 5% 89%;
  --popover: 240 20% 99.6%;
  --popover-foreground: 240 8% 10%;
  --popover-border: 240 5% 87%;
  --border: 240 5% 89%;
  --input: 240 5% 81%;
  --muted: 240 5% 94.5%;
  --muted-foreground: 240 4% 40%;
  --secondary: 240 5% 93.5%;
  --secondary-foreground: 240 8% 12%;
  --accent: 240 5% 93.5%; /* neutral hover / selected surface, not a color */
  --accent-foreground: 240 8% 10%;

  /* The single accent: primary actions, links, focus */
  --primary: 21 90% 40%;
  --primary-foreground: 30 40% 99%;
  --link: 20 88% 38%;
  --ring: var(--primary);

  /* Semantic status (muted). fg = text/icon, subtle = fill, border = outline */
  --success: 152 42% 28%;
  --success-subtle: 150 28% 94%;
  --success-border: 150 24% 82%;
  --warning: 34 72% 30%;
  --warning-subtle: 40 62% 93%;
  --warning-border: 40 46% 80%;
  --danger: 0 62% 40%;
  --danger-subtle: 0 62% 96%;
  --danger-border: 0 48% 86%;
  --info: 212 48% 34%;
  --info-subtle: 212 44% 95%;
  --info-border: 212 32% 84%;
  --destructive: 0 62% 44%;
  --destructive-foreground: 0 40% 99%;

  /* Sidebar */
  --sidebar: 240 6% 95.5%;
  --sidebar-foreground: 240 8% 12%;
  --sidebar-border: 240 5% 88%;
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: 240 5% 90.5%;
  --sidebar-accent-foreground: 240 8% 8%;
  --sidebar-ring: var(--ring);

  /* Media: product packshots and retailer logos always sit on a white well */
  --art-well: 0 0% 100%;
  --art-well-border: 240 5% 88%;
  --overlay: 240 10% 4%;

  /* Charts: accent first, then grays */
  --chart-1: var(--primary);
  --chart-2: 240 5% 30%;
  --chart-3: 240 4% 50%;
  --chart-4: 240 4% 66%;
  --chart-5: 240 4% 80%;

  /* Type: one family. Fixed scale (size / line-height / weight) */
  --app-font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --app-font-serif: var(--app-font-sans);
  --app-font-mono: var(--app-font-sans);
  --text-title-size: 1.5rem;     --text-title-lh: 2rem;      --text-title-weight: 600;
  --text-section-size: 0.9375rem;--text-section-lh: 1.375rem;--text-section-weight: 600;
  --text-body-size: 0.875rem;    --text-body-lh: 1.25rem;    --text-body-weight: 400;
  --text-label-size: 0.75rem;    --text-label-lh: 1rem;      --text-label-weight: 500;
  --text-caption-size: 0.75rem;  --text-caption-lh: 1rem;    --text-caption-weight: 400;
  --text-stat-size: 1.5rem;      --text-stat-lh: 2rem;       --text-stat-weight: 600;

  /* Shape and depth */
  --radius-surface: 0.5rem;
  --radius-control: 0.375rem;
  --radius: var(--radius-surface);
  --border-width: 1px;
  --shadow-color: 240 10% 10%;
  --shadow-2xs: 0 1px 0 0 hsl(var(--shadow-color) / 0.03);
  --shadow-xs: 0 1px 2px 0 hsl(var(--shadow-color) / 0.05);
  --shadow-sm: 0 1px 2px 0 hsl(var(--shadow-color) / 0.05);
  --shadow: 0 1px 3px 0 hsl(var(--shadow-color) / 0.07);
  --shadow-md: 0 4px 12px -4px hsl(var(--shadow-color) / 0.1);
  --shadow-lg: 0 12px 32px -12px hsl(var(--shadow-color) / 0.22);
  --shadow-xl: 0 12px 32px -12px hsl(var(--shadow-color) / 0.22);
  --shadow-2xl: 0 12px 32px -12px hsl(var(--shadow-color) / 0.22);

  /* Layout */
  --space-unit: 0.25rem;
  --space-1: var(--space-unit);
  --space-2: calc(var(--space-unit) * 2);
  --space-3: calc(var(--space-unit) * 3);
  --space-4: calc(var(--space-unit) * 4);
  --space-5: calc(var(--space-unit) * 5);
  --space-6: calc(var(--space-unit) * 6);
  --space-8: calc(var(--space-unit) * 8);
  --space-10: calc(var(--space-unit) * 10);
  --space-12: calc(var(--space-unit) * 12);
  --space-16: calc(var(--space-unit) * 16);
  --page-max: 1200px;
  --sidebar-width: 15rem;

  /* shadcn elevate helpers */
  --button-outline: hsl(var(--foreground) / 0.1);
  --badge-outline: hsl(var(--foreground) / 0.05);
  --opaque-button-border-intensity: -8;
  --elevate-1: hsl(var(--foreground) / 0.03);
  --elevate-2: hsl(var(--foreground) / 0.07);
}

.dark {
  color-scheme: dark;

  --background: 240 6% 7%;
  --foreground: 240 5% 93%;
  --card: 240 5% 10%;
  --card-foreground: 240 5% 93%;
  --card-border: 240 4% 17%;
  --popover: 240 5% 11%;
  --popover-foreground: 240 5% 93%;
  --popover-border: 240 4% 20%;
  --border: 240 4% 17%;
  --input: 240 4% 25%;
  --muted: 240 4% 14%;
  --muted-foreground: 240 5% 64%;
  --secondary: 240 4% 15%;
  --secondary-foreground: 240 5% 93%;
  --accent: 240 4% 16%;
  --accent-foreground: 240 5% 95%;

  --primary: 22 92% 55%;
  --primary-foreground: 24 40% 7%;
  --link: 24 95% 64%;
  --ring: var(--primary);

  --success: 150 38% 66%;
  --success-subtle: 152 24% 13%;
  --success-border: 152 20% 24%;
  --warning: 38 70% 66%;
  --warning-subtle: 36 30% 13%;
  --warning-border: 36 26% 26%;
  --danger: 0 70% 72%;
  --danger-subtle: 0 30% 14%;
  --danger-border: 0 26% 28%;
  --info: 212 60% 74%;
  --info-subtle: 214 28% 14%;
  --info-border: 214 22% 27%;
  --destructive: 0 62% 50%;
  --destructive-foreground: 0 40% 99%;

  --sidebar: 240 6% 8.5%;
  --sidebar-foreground: 240 5% 90%;
  --sidebar-border: 240 4% 16%;
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: 240 4% 15%;
  --sidebar-accent-foreground: 240 5% 96%;
  --sidebar-ring: var(--ring);

  --art-well: 0 0% 100%;
  --art-well-border: 240 4% 24%;
  --overlay: 240 10% 2%;

  --chart-1: var(--primary);
  --chart-2: 240 5% 80%;
  --chart-3: 240 4% 62%;
  --chart-4: 240 4% 46%;
  --chart-5: 240 4% 32%;

  --shadow-color: 240 10% 0%;
  --shadow-sm: 0 1px 2px 0 hsl(var(--shadow-color) / 0.3);
  --shadow: 0 1px 3px 0 hsl(var(--shadow-color) / 0.35);
  --shadow-md: 0 4px 12px -4px hsl(var(--shadow-color) / 0.45);
  --shadow-lg: 0 16px 40px -12px hsl(var(--shadow-color) / 0.6);
  --shadow-xl: 0 16px 40px -12px hsl(var(--shadow-color) / 0.6);
  --shadow-2xl: 0 16px 40px -12px hsl(var(--shadow-color) / 0.6);

  --opaque-button-border-intensity: 9;
}