/* ============================================================
   UNLEVERED — Design Tokens
   Forest green + warm neutrals + terracotta accent
   ------------------------------------------------------------
   All tokens live as CSS custom properties on :root.
   Dark mode swaps semantic tokens via [data-theme="dark"].
   Raw brand colors never change between modes.
   ============================================================ */

:root {
  /* ---------- RAW BRAND PALETTE ---------- */
  --ulv-forest-900: #08251C;
  --ulv-forest-800: #0F3B2E;   /* primary deep forest */
  --ulv-forest-700: #1B4F3F;
  --ulv-forest-600: #2F6F58;   /* muted accent green */
  --ulv-forest-500: #4A8C75;
  --ulv-forest-400: #79AC97;
  --ulv-forest-300: #A8C9BC;
  --ulv-forest-200: #D3E2DA;
  --ulv-forest-100: #ECF3EF;
  --ulv-forest-50:  #F4F8F6;

  --ulv-terra-900: #4D1E0B;
  --ulv-terra-800: #7A3217;
  --ulv-terra-700: #9A4322;
  --ulv-terra-600: #B5552B;    /* terracotta accent */
  --ulv-terra-500: #C97044;
  --ulv-terra-400: #DC9270;
  --ulv-terra-300: #EBB89F;
  --ulv-terra-200: #F4D6C5;
  --ulv-terra-100: #FAEBE0;

  --ulv-stone-900: #1E201D;
  --ulv-stone-800: #2A2C28;
  --ulv-stone-700: #3D4039;
  --ulv-stone-600: #555852;
  --ulv-stone-500: #68716B;    /* muted text gray-green */
  --ulv-stone-400: #8B928C;
  --ulv-stone-300: #B0B5AF;
  --ulv-stone-200: #DDD7CA;    /* line / border */
  --ulv-stone-150: #E6E2D5;
  --ulv-stone-100: #EFEBDF;
  --ulv-stone-75:  #F2EFE5;
  --ulv-stone-50:  #FAFAF8;    /* warm background */
  --ulv-stone-25:  #F7F7F5;    /* soft background */
  --ulv-white:     #FFFFFF;
  --ulv-black:     #0A0B0A;

  /* Status (kept on-brand, sparing) */
  --ulv-success: #2F6F58;
  --ulv-warning: #C28A2C;
  --ulv-danger:  #B5552B;
  --ulv-info:    #3C6A8E;

  /* ============================================================
     SEMANTIC TOKENS — Light mode (default)
     ============================================================ */

  /* Surfaces — crisp white per Bola 2026-05-24 (overrides warm stones) */
  --surface-page:        var(--ulv-white);            /* FFFFFF */
  --surface-canvas:      var(--ulv-white);            /* FFFFFF */
  --surface-raised:      var(--ulv-white);
  --surface-sunken:      var(--ulv-stone-75);
  --surface-inverse:     var(--ulv-forest-800);
  --surface-overlay:     rgba(15, 59, 46, 0.55);

  /* Text */
  --text-primary:        var(--ulv-forest-800);
  --text-secondary:      var(--ulv-stone-600);
  --text-tertiary:       var(--ulv-stone-500);
  --text-disabled:       var(--ulv-stone-400);
  --text-inverse:        var(--ulv-white);
  --text-accent:         var(--ulv-terra-600);
  --text-brand:          var(--ulv-forest-800);
  --text-success:        var(--ulv-forest-600);
  --text-danger:         var(--ulv-terra-700);

  /* Borders */
  --border-subtle:       var(--ulv-stone-150);
  --border-default:      var(--ulv-stone-200);
  --border-strong:       var(--ulv-stone-300);
  --border-inverse:      var(--ulv-forest-700);
  --border-focus:        var(--ulv-forest-600);

  /* Brand actions */
  --action-primary-bg:           var(--ulv-forest-800);
  --action-primary-bg-hover:     var(--ulv-forest-700);
  --action-primary-bg-active:    var(--ulv-forest-900);
  --action-primary-fg:           var(--ulv-white);
  --action-primary-border:       var(--ulv-forest-800);

  --action-secondary-bg:         transparent;
  --action-secondary-bg-hover:   var(--ulv-forest-50);
  --action-secondary-fg:         var(--ulv-forest-800);
  --action-secondary-border:     var(--ulv-forest-800);

  --action-ghost-fg:             var(--ulv-forest-800);
  --action-ghost-bg-hover:       var(--ulv-forest-100);

  --action-danger-bg:            var(--ulv-terra-600);
  --action-danger-bg-hover:      var(--ulv-terra-700);
  --action-danger-fg:            var(--ulv-white);

  /* Field tokens */
  --field-bg:            var(--ulv-white);
  --field-bg-hover:      var(--ulv-stone-25);
  --field-bg-disabled:   var(--ulv-stone-75);
  --field-border:        var(--ulv-stone-200);
  --field-border-hover:  var(--ulv-stone-300);
  --field-border-focus:  var(--ulv-forest-700);
  --field-placeholder:   var(--ulv-stone-400);

  /* Selection */
  --selection-bg:        var(--ulv-forest-100);
  --selection-fg:        var(--ulv-forest-800);

  /* Data viz palette (sequential + categorical) */
  --viz-1: #0F3B2E;
  --viz-2: #2F6F58;
  --viz-3: #79AC97;
  --viz-4: #B5552B;
  --viz-5: #DDD7CA;
  --viz-6: #C28A2C;
  --viz-grid:  var(--ulv-stone-150);
  --viz-axis:  var(--ulv-stone-400);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Display sizes (serif, tight) */
  --type-display-2xl: 76px;
  --type-display-xl:  60px;
  --type-display-lg:  48px;
  --type-display-md:  38px;
  --type-display-sm:  30px;

  /* UI text (sans, balanced) */
  --type-body-xs:  12px;
  --type-body-sm:  13px;
  --type-body-md:  14px;
  --type-body-lg:  16px;
  --type-body-xl:  18px;

  --type-heading-xs: 13px;
  --type-heading-sm: 15px;
  --type-heading-md: 18px;
  --type-heading-lg: 22px;
  --type-heading-xl: 28px;

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.14em;

  /* ---------- SPACING (4px base) ---------- */
  --space-0:  0;
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  8px;
  --space-4:  12px;
  --space-5:  16px;
  --space-6:  20px;
  --space-7:  24px;
  --space-8:  32px;
  --space-9:  40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;

  /* ---------- RADII ---------- */
  /* Flat institutional aesthetic — sharp edges everywhere except true pills. */
  --radius-none: 0;
  --radius-xs:   0;
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-xl:   0;
  --radius-2xl:  0;
  --radius-full: 999px;

  /* ---------- SHADOWS (soft, low-spread) ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 35, 28, 0.05);
  --shadow-sm: 0 1px 2px rgba(15, 35, 28, 0.06), 0 1px 3px rgba(15, 35, 28, 0.04);
  --shadow-md: 0 4px 8px rgba(15, 35, 28, 0.06), 0 2px 4px rgba(15, 35, 28, 0.05);
  --shadow-lg: 0 12px 24px rgba(15, 35, 28, 0.10), 0 4px 8px rgba(15, 35, 28, 0.06);
  --shadow-xl: 0 24px 48px rgba(15, 35, 28, 0.14), 0 8px 16px rgba(15, 35, 28, 0.08);

  --shadow-focus: 0 0 0 3px rgba(47, 111, 88, 0.25);
  --shadow-focus-danger: 0 0 0 3px rgba(181, 85, 43, 0.25);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-normal: 220ms;
  --duration-slow: 380ms;

  /* ---------- LAYOUT ---------- */
  --container-narrow: 720px;
  --container-page:   1200px;
  --container-wide:   1440px;

  --sidebar-w:     260px;
  --topbar-h:      64px;
  --field-h-sm:    32px;
  --field-h-md:    40px;
  --field-h-lg:    48px;
}

/* ============================================================
   DARK MODE
   Same brand DNA — forest is still hero. Surfaces invert to a
   warm near-black ("forest 950"), text becomes a soft bone.
   ============================================================ */
[data-theme="dark"] {
  --surface-page:        #0B1612;
  --surface-canvas:      #0E1B16;
  --surface-raised:      #142420;
  --surface-sunken:      #0A1411;
  --surface-inverse:     var(--ulv-stone-50);
  --surface-overlay:     rgba(5, 12, 9, 0.72);

  --text-primary:        #ECEAE0;
  --text-secondary:      #B8BDB5;
  --text-tertiary:       #8E948D;
  --text-disabled:       #5C6259;
  --text-inverse:        var(--ulv-forest-800);
  --text-accent:         var(--ulv-terra-400);
  --text-brand:          #C9DDD3;
  --text-success:        var(--ulv-forest-400);
  --text-danger:         var(--ulv-terra-300);

  --border-subtle:       #1E2C26;
  --border-default:      #283832;
  --border-strong:       #3A4A43;
  --border-inverse:      var(--ulv-stone-200);
  --border-focus:        var(--ulv-forest-400);

  --action-primary-bg:           #ECEAE0;
  --action-primary-bg-hover:     #FFFFFF;
  --action-primary-bg-active:    #D6D3C5;
  --action-primary-fg:           var(--ulv-forest-800);
  --action-primary-border:       #ECEAE0;

  --action-secondary-bg:         transparent;
  --action-secondary-bg-hover:   #1E2C26;
  --action-secondary-fg:         #ECEAE0;
  --action-secondary-border:     #3A4A43;

  --action-ghost-fg:             #ECEAE0;
  --action-ghost-bg-hover:       #1E2C26;

  --action-danger-bg:            var(--ulv-terra-500);
  --action-danger-bg-hover:      var(--ulv-terra-400);
  --action-danger-fg:            #160903;

  --field-bg:            #0E1B16;
  --field-bg-hover:      #142420;
  --field-bg-disabled:   #0A1411;
  --field-border:        #283832;
  --field-border-hover:  #3A4A43;
  --field-border-focus:  var(--ulv-forest-400);
  --field-placeholder:   #5C6259;

  --selection-bg:        #1B3D31;
  --selection-fg:        #ECEAE0;

  --viz-1: #A8C9BC;
  --viz-2: #79AC97;
  --viz-3: #4A8C75;
  --viz-4: #DC9270;
  --viz-5: #3A4A43;
  --viz-6: #D6B370;
  --viz-grid: #1E2C26;
  --viz-axis: #5C6259;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.50), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.65), 0 8px 16px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px rgba(121, 172, 151, 0.30);
}