/* ═══════════════════════════════════════════════════
   DESIGN TOKENS
   Brand palette + full shadcn/ui variable set (shared
   convention with the app) + an 8px spacing/radius scale.
   ui.shadcn.com theming reference: https://ui.shadcn.com/docs/theming
═══════════════════════════════════════════════════ */
:root {
  /* ── Brand palette — source of truth (hex) ── */
  --prussian: #00183D;
  --teal:     #1C5864;
  --cyan:     #009BC2;
  --jade:     #0C9989;
  --alice:    #DDE7EA;
  --vanilla:  #FFEDA4;

  --teal-60: rgba(28,88,100,.60);
  --teal-24: rgba(28,88,100,.24);
  --teal-14: rgba(28,88,100,.14);
  --teal-08: rgba(28,88,100,.08);
  --teal-04: rgba(28,88,100,.04);
  --cyan-14: rgba(0,155,194,.14);
  --cyan-24: rgba(0,155,194,.24);

  /* ── shadcn tokens (HSL triplets, consumed as hsl(var(--x))) ──
     Same convention as the app. Values below are the HSL
     equivalents of the brand hex colors above, so both systems
     stay in sync if the palette changes. */
  --background:          192 24% 95%;
  --foreground:           216 100% 12%;
  --card:                   0 0% 100%;
  --card-foreground:     216 100% 12%;
  --popover:                0 0% 100%;
  --popover-foreground:  216 100% 12%;
  --primary:              192 100% 38%;  /* cyan — brand CTA color */
  --primary-foreground:    0 0% 100%;
  --secondary:            190 56% 25%;  /* teal — secondary surfaces/actions */
  --secondary-foreground:  0 0% 100%;
  --muted:                192 22% 92%;
  --muted-foreground:     191 20% 42%;
  --accent:               192 100% 95%;  /* pale cyan tint — hover/highlight surfaces */
  --accent-foreground:    192 100% 28%;
  --destructive:             0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border:               192 22% 84%;
  --input:                192 22% 80%;
  --ring:                 192 100% 38%;  /* focus ring — matches primary */
  --jade-hsl:             173 85% 32%;  /* 0C9989 — available accent, not yet wired in */

  --bg:         hsl(var(--background));
  --fg:         hsl(var(--foreground));
  --c-card:     hsl(var(--card));
  --c-border:   hsl(var(--border));
  --c-input:    hsl(var(--input));
  --c-muted-fg: hsl(var(--muted-foreground));

  /* per-feature icon hues — same multi-hue accents as the app section headers */
  --h-analysis: #3B5BA5;
  --h-solar:    #A8690F;
  --h-dash:     #176F7E;
  --h-predict:  #5E45A8;
  --h-battery:  #2A7E50;
  --h-market:   #2D6FB0;

  /* ── Radius scale — shadcn convention: one base value, everything
     else derived. Base is 0.5rem (8px) so it sits on the spacing grid. ── */
  --radius:    0.5rem;                    /* 8px  — lg */
  --radius-sm: calc(var(--radius) - 4px); /* 4px */
  --radius-md: calc(var(--radius) - 2px); /* 6px */
  --radius-lg: var(--radius);             /* 8px */
  --radius-xl: calc(var(--radius) + 4px); /* 12px */

  /* ── Spacing scale — 8px grid, numbered to match Tailwind's spacing
     scale 1:1 (space-N = N * 4px), restricted to even N so every value
     lands on an 8px multiple. Use these for padding/margin/gap and
     interactive-element sizing; typography, icon glyph sizes, border
     widths and content max-widths intentionally sit outside the grid
     (see README). ── */
  --space-2:  0.5rem;   /*  8px */
  --space-4:  1rem;     /* 16px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-14: 3.5rem;   /* 56px */
  --space-16: 4rem;     /* 64px */
  --space-18: 4.5rem;   /* 72px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-28: 7rem;     /* 112px */
  --space-30: 7.5rem;   /* 120px */

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .06);
  --shadow:    0 1px 3px 0 rgb(0 0 0 / .10), 0 1px 2px -1px rgb(0 0 0 / .08);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .10), 0 2px 4px -2px rgb(0 0 0 / .08);

  --font-sans: 'Open Sans', system-ui, -apple-system, sans-serif;
}