/*
  Fyro — design tokens.
  Source of truth: handoff/design-system/tokens/index.css (fase 0), minus the Tailwind directives.

  Every colour is a bare HSL triple, consumed as hsl(var(--token)) or hsl(var(--token) / .5).
  Never write HEX or HSL by hand in an app: the dark theme only works if colours come from here.

  Dark theme: add class "dark" (shadcn convention) or data-theme="dark" on <html>.
  fyro.js resolves data-theme="system" to one of the two.

  Same names as the shadcn "default" theme, so a React + Tailwind + shadcn app can use this
  file unchanged (see /kit/tokens/tailwind.config.patch.md for the Tailwind side).
*/

:root {
  --background: 222 20% 97%;
  --foreground: 224 24% 12%;

  --card: 0 0% 100%;
  --card-foreground: 224 24% 12%;

  --popover: 0 0% 100%;
  --popover-foreground: 224 24% 12%;

  --primary: 249 66% 54%;
  --primary-foreground: 0 0% 100%;
  --primary-subtle: 249 60% 96%;

  --secondary: 222 20% 95%;
  --secondary-foreground: 224 24% 12%;

  --muted: 222 20% 96%;
  --muted-foreground: 222 10% 45%;

  /* shadcn uses accent for hover/selection in menus: a neutral tone, not a brand colour */
  --accent: 222 20% 95%;
  --accent-foreground: 224 24% 12%;

  --destructive: 354 63% 47%;
  --destructive-foreground: 0 0% 100%;

  --border: 222 16% 90%;
  --input: 222 16% 88%;
  --ring: 249 66% 54%;

  --radius: 0.625rem;

  /* semantic */
  --positive: 158 58% 33%;
  --negative: 354 63% 47%;
  --warning: 33 88% 42%;
  --neutral: 222 10% 45%;
  --success: var(--positive);
  --info: var(--primary);

  /* P&L sections: row tint · side bar · ink */
  --pl-income: 168 44% 96%;       --pl-income-bar: 168 52% 38%;   --pl-income-ink: 168 60% 22%;
  --pl-cost-1: 28 62% 96%;        --pl-cost-1-bar: 28 70% 45%;    --pl-cost-1-ink: 28 70% 26%;
  --pl-cost-2: 350 50% 97%;       --pl-cost-2-bar: 350 55% 48%;   --pl-cost-2-ink: 350 55% 30%;
  --pl-cost-3: 292 34% 97%;       --pl-cost-3-bar: 292 40% 50%;   --pl-cost-3-ink: 292 40% 30%;
  --pl-income-2: 196 46% 96%;     --pl-income-2-bar: 196 60% 38%; --pl-income-2-ink: 196 60% 22%;
  --pl-cost-4: 14 50% 97%;        --pl-cost-4-bar: 14 58% 46%;    --pl-cost-4-ink: 14 58% 28%;
  --pl-subtotal: 222 20% 95%;     --pl-subtotal-bar: 224 24% 20%;
  --pl-key: 249 60% 96%;          --pl-key-ink: 249 60% 34%;
  --pl-total: 249 66% 54%;        --pl-total-ink: 0 0% 100%;

  /* categorical: 10 fixed slots + "rest". Assigned once, same index = same colour everywhere */
  --cc-1: 249 60% 56%;
  --cc-2: 196 58% 44%;
  --cc-3: 168 52% 38%;
  --cc-4: 128 42% 38%;
  --cc-5: 84 40% 36%;
  --cc-6: 40 64% 42%;
  --cc-7: 20 62% 46%;
  --cc-8: 354 56% 50%;
  --cc-9: 324 44% 48%;
  --cc-10: 292 38% 52%;
  --cc-rest: 222 10% 62%;

  /* compatibility: no gradients, flat colour */
  --gradient-primary: linear-gradient(hsl(var(--primary)), hsl(var(--primary)));
  --gradient-card: linear-gradient(hsl(var(--card)), hsl(var(--card)));

  --shadow-sm: 0 1px 2px hsl(224 24% 12% / 0.06);
  --shadow-md: 0 4px 12px hsl(224 24% 12% / 0.08);
  --shadow-lg: 0 16px 40px hsl(224 24% 12% / 0.14);
  --shadow-xl: 0 24px 60px hsl(224 24% 12% / 0.18);

  --sidebar-background: 222 20% 98%;
  --sidebar-foreground: 222 12% 34%;
  --sidebar-primary: 249 66% 54%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 100%;
  --sidebar-accent-foreground: 224 24% 12%;
  --sidebar-border: 222 16% 91%;
  --sidebar-ring: 249 66% 54%;

  /* type, space, size — not in the shadcn set, used by fyro.css */
  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, monospace;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;

  /* Same scale shadcn + the Tailwind patch produce, so a vanilla page and a React page match */
  --radius-sm: calc(var(--radius) - 4px);    /* 6px: badges, chips */
  --radius-md: calc(var(--radius) - 2px);    /* 8px: buttons, inputs */
  --radius-lg: var(--radius);                /* 10px: segmented, popovers */
  --radius-xl: calc(var(--radius) + 4px);    /* 14px: cards (KpiCard is rounded-xl) */

  --h-topbar: 56px;
  --h-filterbar: 52px;
  --h-control: 32px;
  --h-control-sm: 30px;
  --h-touch: 44px;
  --h-row: 38px;
  --w-sidebar: 232px;
  --w-sidebar-collapsed: 60px;

  color-scheme: light;
}

.dark,
[data-theme="dark"] {
  --background: 226 24% 7%;
  --foreground: 220 20% 96%;

  --card: 226 20% 10%;
  --card-foreground: 220 20% 96%;

  --popover: 226 20% 11%;
  --popover-foreground: 220 20% 96%;

  --primary: 250 80% 68%;
  --primary-foreground: 250 60% 10%;
  --primary-subtle: 250 40% 18%;

  --secondary: 226 16% 15%;
  --secondary-foreground: 220 20% 96%;

  --muted: 226 16% 15%;
  --muted-foreground: 222 12% 62%;

  --accent: 226 16% 17%;
  --accent-foreground: 220 20% 96%;

  --destructive: 354 78% 66%;
  --destructive-foreground: 354 60% 10%;

  --border: 226 14% 19%;
  --input: 226 14% 23%;
  --ring: 250 80% 68%;

  --positive: 156 52% 52%;
  --negative: 354 78% 66%;
  --warning: 36 88% 60%;
  --neutral: 222 12% 62%;

  --pl-income: 168 30% 14%;       --pl-income-bar: 168 45% 50%;   --pl-income-ink: 168 40% 80%;
  --pl-cost-1: 28 34% 14%;        --pl-cost-1-bar: 28 70% 58%;    --pl-cost-1-ink: 28 48% 80%;
  --pl-cost-2: 350 30% 15%;       --pl-cost-2-bar: 350 62% 62%;   --pl-cost-2-ink: 350 40% 84%;
  --pl-cost-3: 292 24% 16%;       --pl-cost-3-bar: 292 46% 66%;   --pl-cost-3-ink: 292 34% 84%;
  --pl-income-2: 196 30% 14%;     --pl-income-2-bar: 196 55% 55%; --pl-income-2-ink: 196 40% 82%;
  --pl-cost-4: 14 30% 15%;        --pl-cost-4-bar: 14 62% 58%;    --pl-cost-4-ink: 14 40% 82%;
  --pl-subtotal: 226 16% 17%;     --pl-subtotal-bar: 220 20% 80%;
  --pl-key: 250 40% 18%;          --pl-key-ink: 250 60% 88%;
  --pl-total: 250 60% 62%;        --pl-total-ink: 250 60% 98%;

  --cc-1: 250 65% 66%;
  --cc-2: 196 55% 57%;
  --cc-3: 168 45% 52%;
  --cc-4: 128 40% 52%;
  --cc-5: 84 38% 50%;
  --cc-6: 40 62% 56%;
  --cc-7: 20 62% 60%;
  --cc-8: 354 62% 62%;
  --cc-9: 324 46% 62%;
  --cc-10: 292 46% 68%;
  --cc-rest: 222 12% 48%;

  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.3);
  --shadow-md: 0 4px 12px hsl(0 0% 0% / 0.35);
  --shadow-lg: 0 16px 40px hsl(0 0% 0% / 0.45);
  --shadow-xl: 0 24px 60px hsl(0 0% 0% / 0.5);

  --sidebar-background: 226 22% 8%;
  --sidebar-foreground: 220 14% 78%;
  --sidebar-primary: 250 80% 68%;
  --sidebar-primary-foreground: 250 60% 10%;
  --sidebar-accent: 226 14% 20%;
  --sidebar-accent-foreground: 220 20% 96%;
  --sidebar-border: 226 14% 19%;
  --sidebar-ring: 250 80% 68%;

  color-scheme: dark;
}