/* ============================================================
   ESmont Dashboard — Design Tokens
   OKLCH colour system; shadcn/ui token naming convention.
   Change --accent-hue to recolour the entire UI in one line.
   ============================================================ */

:root {
  /* --- Palette: single hue knob drives the primary family --- */
  --accent-hue: 150;       /* green brand */

  /* --- Semantic surface tokens (light) --- */
  --background:         oklch(0.96 0 0);          /* page bg  #f5f5f5 */
  --foreground:         oklch(0.30 0.04 244);      /* body text #304150 */
  --card:               oklch(1 0 0);              /* card / modal bg #fff */
  --card-foreground:    oklch(0.30 0.04 244);
  --border:             oklch(0.90 0 0);           /* dividers / inputs #e5e5e5 */
  --border-subtle:      oklch(0.85 0 0);           /* slightly stronger #d4d4d4 */
  --muted:              oklch(0.97 0 0);           /* subdued surface #f9fafb */
  --muted-foreground:   oklch(0.55 0.02 244);      /* secondary text   #7b809a */

  /* --- Interactive --- */
  --primary:            oklch(0.65 0.18 150);      /* green brand  #66bb6a */
  --primary-dark:       oklch(0.55 0.18 150);      /* hover/active #43a047 */
  --primary-foreground: oklch(1 0 0);              /* white text on primary */
  --brand:              oklch(0.32 0.07 255);      /* navy text/icons #3a416f */

  /* --- Status accents (match current UI semantics) --- */
  --status-queued:      oklch(0.72 0.17  80);      /* amber  #f59e0b */
  --status-in-progress: oklch(0.65 0.18 240);      /* blue   #49a3f1 */
  --status-done:        oklch(0.65 0.20 150);      /* green  #22c55e */

  /* --- Feedback --- */
  --destructive:        oklch(0.58 0.24  27);      /* red    #ef4444 */
  --destructive-dark:   oklch(0.50 0.24  27);      /* #e53935 */
  --warning:            oklch(0.72 0.17  80);      /* amber  = queued */
  --info:               oklch(0.65 0.18 240);      /* blue   = in-progress */
  --success:            oklch(0.65 0.20 150);      /* green  = done */

  /* --- Focus ring --- */
  --ring:               oklch(0.60 0.18 var(--accent-hue));

  /* --- Layout --- */
  --radius:             12px;
  --radius-sm:           8px;
  --radius-lg:          16px;
  --card-padding:       1rem;
  --layout-gap:         20px;

  /* --- Shadows (light) --- */
  --shadow-sm:   0 2px 8px rgba(0,0,0,.08);
  --shadow-md:   0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-lg:   0 8px 24px rgba(0,0,0,.15);
}

/* Dark-mode surface overrides — applied via html.dark (toggled by JS) */
html.dark {
  --background:         oklch(0.10 0.02 244);      /* #0b1220 */
  --foreground:         oklch(0.93 0    244);      /* #e5e7eb */
  --card:               oklch(0.13 0.02 244);      /* #0f172a */
  --card-foreground:    oklch(0.93 0    244);
  --border:             oklch(0.22 0.02 244);      /* #1f2937 */
  --border-subtle:      oklch(0.27 0.02 244);      /* #2a3142 */
  --muted:              oklch(0.22 0.02 244);      /* #1f2937 */
  --muted-foreground:   oklch(0.65 0.01 244);      /* #cbd5e1 */
  --primary:            oklch(0.70 0.18 150);      /* lighter green in dark */
  --brand:              oklch(0.88 0    0);         /* #e0e0e0 */
  --shadow-sm:   0 2px 8px rgba(0,0,0,.30);
  --shadow-md:   0 10px 15px -3px rgba(0,0,0,.40), 0 4px 6px -2px rgba(0,0,0,.30);
}