/* ==========================================================================
   CocoaChain — Design Tokens
   Foundation layer: color, type, space, radius, elevation, motion.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---- Brand ramp (cocoa leaf green) ---------------------------------- */
  --brand-50:  #eef7ed;
  --brand-100: #d6ecd4;
  --brand-200: #b0dcac;
  --brand-300: #85c87f;
  --brand-400: #5daa52;   /* secondary */
  --brand-500: #3b7d3a;   /* primary   */
  --brand-600: #326a31;
  --brand-700: #285528;
  --brand-800: #1e401e;
  --brand-900: #142c14;

  /* ---- Accent ramp (cocoa pod gold) ----------------------------------- */
  --gold-50:  #fdf6e9;
  --gold-100: #f8e8c6;
  --gold-200: #eed097;
  --gold-300: #dfb162;
  --gold-400: #c68a2b;   /* accent */
  --gold-500: #a97323;
  --gold-600: #875b1b;

  /* ---- Semantic ------------------------------------------------------- */
  --warning: #f59e0b;
  --danger:  #ef4444;
  --success: #22c55e;
  --info:    #3b82f6;
  --violet:  #8b5cf6;
  --cyan:    #06b6d4;

  --warning-soft: rgba(245, 158, 11, .14);
  --danger-soft:  rgba(239, 68, 68, .14);
  --success-soft: rgba(34, 197, 94, .14);
  --info-soft:    rgba(59, 130, 246, .14);
  --brand-soft:   rgba(59, 125, 58, .12);
  --gold-soft:    rgba(198, 138, 43, .14);

  /* ---- Data-viz categorical (validated for AA on both themes) --------- */
  --dv-1: #3b7d3a;
  --dv-2: #c68a2b;
  --dv-3: #3b82f6;
  --dv-4: #8b5cf6;
  --dv-5: #06b6d4;
  --dv-6: #ef4444;
  --dv-7: #5daa52;
  --dv-8: #f59e0b;

  /* ---- Neutral ramp --------------------------------------------------- */
  --gray-0:   #ffffff;
  --gray-25:  #fcfdfc;
  --gray-50:  #f7f9f7;
  --gray-100: #eef1ef;
  --gray-200: #e2e6e3;
  --gray-300: #cbd2cd;
  --gray-400: #9aa39d;
  --gray-500: #6f7a74;
  --gray-600: #525c56;
  --gray-700: #3c4540;
  --gray-800: #262d29;
  --gray-900: #161b18;
  --gray-950: #0d100e;

  /* ---- Typography ----------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --text-2xs: .6875rem;   /* 11 */
  --text-xs:  .75rem;     /* 12 */
  --text-sm:  .8125rem;   /* 13 */
  --text-md:  .875rem;    /* 14 */
  --text-base:.9375rem;   /* 15 */
  --text-lg:  1.0625rem;  /* 17 */
  --text-xl:  1.25rem;    /* 20 */
  --text-2xl: 1.5rem;     /* 24 */
  --text-3xl: 1.875rem;   /* 30 */
  --text-4xl: 2.375rem;   /* 38 */
  --text-5xl: 3rem;       /* 48 */

  --tracking-tight: -.022em;
  --tracking-snug:  -.014em;
  --tracking-wide:  .04em;
  --tracking-caps:  .08em;

  /* ---- Space (4pt grid) ----------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 48px;  --s-10: 64px; --s-11: 80px; --s-12: 112px;

  /* ---- Radius --------------------------------------------------------- */
  --r-xs: 6px;  --r-sm: 8px;  --r-md: 12px; --r-lg: 16px;
  --r-xl: 20px; --r-2xl: 28px; --r-full: 999px;

  /* ---- Motion --------------------------------------------------------- */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 460ms;
  --ease:        cubic-bezier(.32, .72, 0, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ---- Layout --------------------------------------------------------- */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 64px;
  --page-max: 1560px;
}

/* ==========================================================================
   LIGHT THEME (default)
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg-canvas:    #f6f8f6;
  --bg-surface:   #ffffff;
  --bg-raised:    #ffffff;
  --bg-sunken:    #f1f4f1;
  --bg-inset:     #eaefea;
  --bg-hover:     rgba(15, 30, 20, .045);
  --bg-active:    rgba(15, 30, 20, .075);
  --bg-sidebar:   rgba(255, 255, 255, .72);
  --bg-topbar:    rgba(255, 255, 255, .68);

  --glass-bg:     rgba(255, 255, 255, .62);
  --glass-brd:    rgba(255, 255, 255, .75);
  --glass-blur:   saturate(180%) blur(20px);

  --text-1: var(--gray-900);
  --text-2: var(--gray-600);
  --text-3: var(--gray-500);
  --text-4: var(--gray-400);
  --text-inv: #ffffff;

  --brd-1: rgba(15, 35, 20, .085);
  --brd-2: rgba(15, 35, 20, .14);
  --brd-3: rgba(15, 35, 20, .22);

  --accent-fg: var(--brand-500);
  --accent-bg: var(--brand-500);

  --shadow-xs: 0 1px 2px rgba(16, 32, 22, .05);
  --shadow-sm: 0 1px 2px rgba(16, 32, 22, .05), 0 2px 6px rgba(16, 32, 22, .04);
  --shadow-md: 0 2px 4px rgba(16, 32, 22, .04), 0 8px 20px rgba(16, 32, 22, .07);
  --shadow-lg: 0 4px 8px rgba(16, 32, 22, .05), 0 18px 44px rgba(16, 32, 22, .10);
  --shadow-xl: 0 8px 16px rgba(16, 32, 22, .06), 0 32px 72px rgba(16, 32, 22, .14);
  --shadow-brand: 0 6px 20px rgba(59, 125, 58, .28);

  --grid-line: rgba(15, 35, 20, .07);
  --chart-track: rgba(15, 35, 20, .07);

  --aurora-1: rgba(93, 170, 82, .20);
  --aurora-2: rgba(198, 138, 43, .16);
  --aurora-3: rgba(59, 130, 246, .12);
}

/* ==========================================================================
   DARK THEME
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-canvas:    #0b0f0d;
  --bg-surface:   #121815;
  --bg-raised:    #171f1b;
  --bg-sunken:    #0e1311;
  --bg-inset:     #1b241f;
  --bg-hover:     rgba(255, 255, 255, .055);
  --bg-active:    rgba(255, 255, 255, .09);
  --bg-sidebar:   rgba(16, 22, 19, .74);
  --bg-topbar:    rgba(13, 18, 16, .7);

  --glass-bg:     rgba(23, 31, 27, .58);
  --glass-brd:    rgba(255, 255, 255, .08);
  --glass-blur:   saturate(160%) blur(20px);

  --text-1: #eef2ef;
  --text-2: #a5b0a9;
  --text-3: #7d8983;
  --text-4: #5d6862;
  --text-inv: #0b0f0d;

  --brd-1: rgba(255, 255, 255, .07);
  --brd-2: rgba(255, 255, 255, .12);
  --brd-3: rgba(255, 255, 255, .20);

  --accent-fg: #7cc470;
  --accent-bg: var(--brand-500);

  --brand-soft: rgba(93, 170, 82, .16);
  --gold-soft:  rgba(223, 177, 98, .16);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 6px rgba(0, 0, 0, .3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .42);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, .35), 0 20px 48px rgba(0, 0, 0, .5);
  --shadow-xl: 0 8px 18px rgba(0, 0, 0, .4), 0 36px 80px rgba(0, 0, 0, .6);
  --shadow-brand: 0 6px 24px rgba(59, 125, 58, .45);

  --grid-line: rgba(255, 255, 255, .06);
  --chart-track: rgba(255, 255, 255, .08);

  --aurora-1: rgba(59, 125, 58, .30);
  --aurora-2: rgba(198, 138, 43, .18);
  --aurora-3: rgba(59, 130, 246, .16);

  /* lift semantic colors for dark backgrounds */
  --dv-1: #6cbb60;
  --dv-2: #dfb162;
  --dv-3: #60a5fa;
  --dv-4: #a78bfa;
  --dv-5: #22d3ee;
  --dv-6: #f87171;
  --dv-7: #a3d99b;
  --dv-8: #fbbf24;
  --success: #4ade80;
  --danger:  #f87171;
  --warning: #fbbf24;
  --info:    #60a5fa;
}

/* High-contrast opt-in */
[data-contrast="high"] {
  --brd-1: var(--brd-3);
  --brd-2: var(--brd-3);
  --text-2: var(--text-1);
  --text-3: var(--text-1);
}

/* ==========================================================================
   Icon safety net — every icon from assets/js/icons.js `ico()` shares
   viewBox="0 0 24 24". Without an explicit width/height a bare <svg> falls
   back to the browser's intrinsic ~300×150 box, blowing up any container
   that doesn't already carry its own "<selector> svg { width/height }" rule.
   This baseline runs first in the cascade (tokens.css loads before base.css/
   components.css) so any later, more specific sizing rule still wins.
   ========================================================================== */
svg[viewBox="0 0 24 24"] { width: 16px; height: 16px; flex-shrink: 0; }