/* ==========================================================================
   Helix / DigitalAPI design tokens
   Extracted from the live Helix portal stylesheet (helix-dev.gateway.digitalapicraft.com), 2026-11-02.
   Colour channels are OKLCH "L C H" triplets -> use as  oklch(var(--token))
   or with alpha:  oklch(var(--token) / 0.6)
   Fonts: Geist + Geist Mono (npm i geist  or  Google Fonts "Geist", "Geist Mono")
   ========================================================================== */

:root {
  /* ---- Typography ---- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Libre Baskerville", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-display: "Geist", var(--font-sans);
  --font-size-base: 1rem;
  --tracking-tight: -.04em;
  --tracking-normal: -.01em;
  --tracking-wide: .02em;
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ---- Semantic colours (shadcn/ui contract) ---- */
  --background: .985 0 0;
  --foreground: .145 0 0;
  --card: 1 0 0;
  --card-foreground: .145 0 0;
  --popover: 1 0 0;
  --popover-foreground: .2 0 0;
  --primary: .44 .23 264;
  --primary-foreground: 1 0 0;
  --secondary: .94 0 0;
  --secondary-foreground: .35 0 0;
  --muted: .96 0 0;
  --muted-foreground: .55 0 0;
  --accent: .95 .03 264;
  --accent-foreground: .35 .12 264;
  --destructive: .55 .22 25;
  --destructive-foreground: 1 0 0;
  --border: .9 0 0;
  --input: .9 0 0;
  --ring: .44 .23 264;
  --radius: .5rem; /* NOTE: rendered components use 2px (controls) and 4px (cards); see spec */

  /* ---- Ramps ---- */
  --primary-50: .97 .02 264;  --primary-100: .94 .04 264; --primary-200: .88 .08 264;
  --primary-300: .8 .12 264;  --primary-400: .62 .18 264; --primary-500: .44 .23 264;
  --primary-600: .38 .2 264;  --primary-700: .32 .17 264; --primary-800: .26 .13 264;
  --primary-900: .22 .09 264; --primary-950: .18 .06 264;

  --secondary-50: .98 0 0;  --secondary-100: .96 0 0; --secondary-200: .92 0 0;
  --secondary-300: .85 0 0; --secondary-400: .7 0 0;  --secondary-500: .55 0 0;
  --secondary-600: .45 0 0; --secondary-700: .35 0 0; --secondary-800: .25 0 0;
  --secondary-900: .18 0 0; --secondary-950: .12 0 0;

  --success-50: .97 .04 145;  --success-100: .93 .08 145; --success-200: .87 .12 145;
  --success-300: .78 .15 145; --success-400: .69 .17 145; --success-500: .6 .18 145;
  --success-600: .52 .16 145; --success-700: .45 .14 145; --success-800: .38 .12 145;
  --success-900: .32 .1 145;  --success-950: .25 .07 145;

  --warning-50: .97 .04 85;  --warning-100: .93 .08 85; --warning-200: .87 .12 85;
  --warning-300: .81 .15 85; --warning-400: .78 .17 85; --warning-500: .75 .18 85;
  --warning-600: .68 .17 85; --warning-700: .6 .15 85;  --warning-800: .5 .13 85;
  --warning-900: .42 .11 85; --warning-950: .32 .08 85;

  --destructive-50: .97 .02 25;  --destructive-100: .93 .05 25; --destructive-200: .87 .1 25;
  --destructive-300: .78 .15 25; --destructive-400: .66 .2 25;  --destructive-500: .55 .22 25;
  --destructive-600: .48 .2 25;  --destructive-700: .42 .18 25; --destructive-800: .36 .15 25;
  --destructive-900: .3 .12 25;  --destructive-950: .22 .08 25;

  --info-50: .97 .02 250;  --info-100: .93 .05 250; --info-200: .87 .09 250;
  --info-300: .78 .13 250; --info-400: .69 .16 250; --info-500: .6 .18 250;
  --info-600: .52 .16 250; --info-700: .45 .14 250; --info-800: .38 .12 250;
  --info-900: .32 .09 250; --info-950: .25 .06 250;

  /* "accent-NNN" ramp is violet (hue 300) – distinct from semantic --accent (blue tint) */
  --accent-50: .97 .03 300;  --accent-100: .93 .06 300; --accent-200: .87 .11 300;
  --accent-300: .78 .16 300; --accent-400: .68 .2 300;  --accent-500: .58 .23 300;
  --accent-600: .5 .21 300;  --accent-700: .42 .18 300; --accent-800: .36 .15 300;
  --accent-900: .3 .12 300;  --accent-950: .22 .08 300;

  /* ---- Charts & gradients ---- */
  --chart-1: .44 .23 264; --chart-2: .6 .18 145; --chart-3: .75 .18 85;
  --chart-4: .65 .2 300;  --chart-5: .65 .2 350;
  --gradient-brand: linear-gradient(135deg, oklch(.55 .25 295), oklch(.44 .23 264), oklch(.52 .22 232));
  --gradient-success: linear-gradient(135deg, oklch(.68 .18 165), oklch(.6 .18 145), oklch(.55 .17 125));
  --gradient-warning: linear-gradient(135deg, oklch(.82 .18 75), oklch(.75 .18 85), oklch(.66 .18 55));
  --gradient-info: linear-gradient(135deg, oklch(.64 .18 268), oklch(.6 .18 250), oklch(.56 .18 222));
  --gradient-destructive: linear-gradient(135deg, oklch(.62 .22 40), oklch(.55 .22 25), oklch(.48 .22 10));

  /* ---- App shell ---- */
  --sidebar-width: 240px;            /* rendered at 256px incl. padding */
  --sidebar-width-collapsed: 64px;
  --sidebar-width-mobile: 288px;
  --sidebar: .18 .07 260;            /* deep navy */
  --sidebar-foreground: 1 0 0;
  --sidebar-border: .28 .16 264;
  --sidebar-accent: .38 .17 264;     /* active nav item bg */
  --sidebar-accent-foreground: 1 0 0;
  --sidebar-primary: .44 .23 264;
  --sidebar-primary-foreground: 1 0 0;
  --sidebar-ring: .44 .23 264;
  --header-height: 56px;
  --header-background: 1 0 0;
  --header-foreground: .2 0 0;
  --header-border: .92 0 0;

  /* ---- Spacing (4px grid) ---- */
  --theme-scale: 1;
  --spacing: 4px;
  --content-padding: calc(var(--spacing) * 4);
  --section-gap: calc(var(--spacing) * 6);
  --card-padding: calc(var(--spacing) * 6);
  --card-gap: calc(var(--spacing) * 4);
  --grid-gap: calc(var(--spacing) * 4);
  --stack-gap: calc(var(--spacing) * 4);
  --inline-gap: calc(var(--spacing) * 2);

  /* ---- Elevation ---- */
  --shadow-2xs: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-xs: 0 2px 4px rgba(0, 0, 0, .06);
  --shadow-sm: 0 5px 10px rgba(0, 0, 0, .12);
  --shadow: 0 5px 10px rgba(0, 0, 0, .12);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, .12);
  --shadow-lg: 0 30px 60px rgba(0, 0, 0, .12);
  --shadow-xl: 0 30px 60px rgba(0, 0, 0, .15);
  --shadow-2xl: 0 30px 60px rgba(0, 0, 0, .2);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, .12);

  /* ---- Motion ---- */
  --duration-fast: .15s;
  --duration-normal: .2s;
  --duration-slow: .3s;
  --ease-in: cubic-bezier(.42, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, .58, 1);
  --ease-in-out: cubic-bezier(.42, 0, .58, 1);
  --ease-bounce: cubic-bezier(.68, -.55, .265, 1.55);
}

.dark {
  --background: .15 0 0;
  --foreground: .95 0 0;
  --card: .2 0 0;
  --card-foreground: .95 0 0;
  --popover: .18 0 0;
  --popover-foreground: .95 0 0;
  --primary: .66 .2 264;
  --primary-foreground: .15 .02 264;
  --secondary: .3 0 0;
  --secondary-foreground: .9 0 0;
  --muted: .25 0 0;
  --muted-foreground: .7 0 0;
  --accent: .3 .08 264;
  --accent-foreground: .9 .05 264;
  --destructive: .6 .2 25;
  --destructive-foreground: .98 0 0;
  --border: .3 0 0;
  --input: .3 0 0;
  --ring: .58 .2 264;

  --primary-50: .2 .06 264;  --primary-100: .25 .09 264; --primary-200: .32 .13 264;
  --primary-300: .4 .17 264; --primary-400: .5 .2 264;   --primary-500: .58 .2 264;
  --primary-600: .68 .18 264; --primary-700: .78 .14 264; --primary-800: .86 .1 264;
  --primary-900: .92 .05 264; --primary-950: .96 .02 264;

  --secondary-50: .18 0 0;  --secondary-100: .22 0 0; --secondary-200: .28 0 0;
  --secondary-300: .38 0 0; --secondary-400: .5 0 0;  --secondary-500: .65 0 0;
  --secondary-600: .75 0 0; --secondary-700: .85 0 0; --secondary-800: .92 0 0;
  --secondary-900: .96 0 0; --secondary-950: .98 0 0;

  --success-50: .2 .05 145;  --success-100: .25 .08 145; --success-200: .32 .11 145;
  --success-300: .42 .14 145; --success-400: .52 .16 145; --success-500: .65 .16 145;
  --success-600: .72 .14 145; --success-700: .78 .12 145; --success-800: .86 .1 145;
  --success-900: .92 .06 145; --success-950: .96 .03 145;

  --warning-50: .2 .05 85;  --warning-100: .25 .08 85; --warning-200: .34 .12 85;
  --warning-300: .5 .15 85; --warning-400: .66 .16 85; --warning-500: .78 .16 85;
  --warning-600: .82 .14 85; --warning-700: .86 .12 85; --warning-800: .9 .09 85;
  --warning-900: .94 .06 85; --warning-950: .97 .03 85;

  --destructive-50: .2 .05 25;  --destructive-100: .25 .08 25; --destructive-200: .32 .12 25;
  --destructive-300: .42 .17 25; --destructive-400: .52 .19 25; --destructive-500: .6 .2 25;
  --destructive-600: .68 .18 25; --destructive-700: .75 .15 25; --destructive-800: .84 .12 25;
  --destructive-900: .9 .08 25;  --destructive-950: .95 .04 25;

  --info-50: .2 .04 250;  --info-100: .25 .06 250; --info-200: .32 .09 250;
  --info-300: .42 .12 250; --info-400: .54 .15 250; --info-500: .65 .16 250;
  --info-600: .72 .14 250; --info-700: .78 .12 250; --info-800: .85 .1 250;
  --info-900: .91 .06 250; --info-950: .96 .03 250;

  --accent-50: .22 .06 300;  --accent-100: .28 .1 300; --accent-200: .36 .14 300;
  --accent-300: .46 .18 300; --accent-400: .56 .21 300; --accent-500: .66 .22 300;
  --accent-600: .74 .19 300; --accent-700: .82 .15 300; --accent-800: .88 .11 300;
  --accent-900: .93 .07 300; --accent-950: .96 .04 300;

  --chart-1: .58 .2 264; --chart-2: .65 .16 145; --chart-3: .8 .16 85;
  --chart-4: .7 .18 300; --chart-5: .7 .18 350;
  --gradient-brand: linear-gradient(135deg, oklch(.62 .22 295), oklch(.54 .22 264), oklch(.58 .2 232));
  --gradient-success: linear-gradient(135deg, oklch(.72 .17 165), oklch(.65 .17 145), oklch(.6 .16 125));
  --gradient-warning: linear-gradient(135deg, oklch(.86 .16 75), oklch(.78 .16 85), oklch(.7 .16 55));
  --gradient-info: linear-gradient(135deg, oklch(.7 .17 268), oklch(.65 .17 250), oklch(.6 .17 222));
  --gradient-destructive: linear-gradient(135deg, oklch(.68 .2 40), oklch(.6 .2 25), oklch(.54 .2 10));

  --sidebar: .15 0 0;
  --sidebar-foreground: .9 0 0;
  --sidebar-border: .3 0 0;
  --sidebar-accent: .22 0 0;
  --sidebar-accent-foreground: .95 0 0;
  --sidebar-primary: .58 .2 264;
  --sidebar-primary-foreground: .15 .02 264;
  --sidebar-ring: .58 .2 264;
  --header-background: .2 0 0;
  --header-foreground: .95 0 0;
  --header-border: .25 0 0;

  --shadow-2xs: 0 1px 2px rgba(0, 0, 0, .2);
  --shadow-xs: 0 2px 4px rgba(0, 0, 0, .25);
  --shadow-sm: 0 5px 10px rgba(0, 0, 0, .4);
  --shadow: 0 5px 10px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, .4);
  --shadow-lg: 0 30px 60px rgba(0, 0, 0, .4);
  --shadow-xl: 0 30px 60px rgba(0, 0, 0, .5);
  --shadow-2xl: 0 30px 60px rgba(0, 0, 0, .6);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, .4);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0s; --duration-normal: 0s; --duration-slow: 0s; }
}

/* Base */
html { font-family: var(--font-sans); font-size: var(--font-size-base); }
body { background: oklch(var(--background)); color: oklch(var(--foreground)); -webkit-font-smoothing: antialiased; }
*, ::before, ::after { border-color: oklch(var(--border)); }
:focus-visible { outline: 2px solid oklch(var(--ring)); outline-offset: 2px; }