/* ============================================================
   UNLEVERED — COLOR
   Forest is the brand · Stone carries surfaces · Terracotta highlights.
   Raw palette is theme-independent; surface/text/shadow roles flip per theme.
   ============================================================ */

:root {
  /* ---- Raw brand palette (theme-independent) ---- */
  --ulv-forest-900: #08251C;
  --ulv-forest-800: #0F3B2E;   /* primary */
  --ulv-forest-700: #1B4F3F;
  --ulv-forest-600: #2F6F58;   /* accent */
  --ulv-forest-500: #4A8C75;
  --ulv-forest-400: #79AC97;
  --ulv-forest-300: #A9C8BB;
  --ulv-forest-200: #D3E2DA;
  --ulv-forest-100: #ECF3EF;

  --ulv-stone-900: #1E201D;    /* inverse text */
  --ulv-stone-800: #2A2D28;
  --ulv-stone-700: #3D4039;
  --ulv-stone-500: #68716B;    /* muted text */
  --ulv-stone-400: #8B928C;
  --ulv-stone-300: #B0B5AF;
  --ulv-stone-200: #DDD7CA;    /* border */
  --ulv-stone-100: #EDEBE3;
  --ulv-stone-75:  #F2F1EB;
  --ulv-stone-50:  #FAFAF8;    /* warm bg */
  --ulv-white:     #FFFFFF;

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

  --ulv-saffron:   #C28A2C;
  --ulv-slate:     #3C6A8E;

  /* ---- Visualization palette ---- */
  --viz-1: #1B4F3F;   /* forest, primary series */
  --viz-2: #C97044;   /* terracotta, highlighted series */
  --viz-3: #4A8C75;   /* forest light */
  --viz-4: #C28A2C;   /* saffron */
  --viz-5: #B0B5AF;   /* stone, remainder */
  --viz-6: #3C6A8E;   /* slate blue */
}

/* ============================================================
   LIGHT THEME (default)
   ============================================================ */
:root,
[data-theme="light"] {
  --surface-page:    #FAFAF8;
  --surface-canvas:  #F2F1EB;   /* recessed warm */
  --surface-raised:  #FFFFFF;
  --surface-sunken:  #ECEAE2;

  --border-default:  #E2DED2;
  --border-subtle:   #ECEAE1;
  --border-strong:   #CFC9BA;

  --text-primary:    #15241D;
  --text-secondary:  #4C544E;
  --text-tertiary:   #8B928C;
  --text-faint:      #AEB3AD;
  --text-accent:     #2F6F58;
  --text-on-brand:   #FFFFFF;

  --focus-ring:      rgba(47, 111, 88, 0.28);

  --shadow-xs: 0 1px 1px rgba(40, 30, 18, 0.04);
  --shadow-sm: 0 1px 2px rgba(40, 30, 18, 0.06), 0 1px 3px rgba(40, 30, 18, 0.05);
  --shadow-md: 0 4px 8px rgba(40, 30, 18, 0.07), 0 2px 4px rgba(40, 30, 18, 0.05);
  --shadow-lg: 0 12px 24px rgba(40, 30, 18, 0.09), 0 4px 8px rgba(40, 30, 18, 0.05);
  --shadow-xl: 0 24px 48px rgba(40, 30, 18, 0.14), 0 8px 16px rgba(40, 30, 18, 0.06);

  --viz-grid: #ECEAE1;
  --viz-axis: #8B928C;
}

/* ============================================================
   DARK THEME — set data-theme="dark" on any wrapper to flip a subtree
   ============================================================ */
[data-theme="dark"] {
  --surface-page:    #0B1812;
  --surface-canvas:  #0F2019;
  --surface-raised:  #14271F;
  --surface-sunken:  #0A150F;

  --border-default:  #233A2F;
  --border-subtle:   #1A2E25;
  --border-strong:   #335042;

  --text-primary:    #EAF2EC;
  --text-secondary:  #A9B6AE;
  --text-tertiary:   #6F7D74;
  --text-faint:      #586259;
  --text-accent:     #79AC97;
  --text-on-brand:   #FFFFFF;

  --focus-ring:      rgba(121, 172, 151, 0.32);

  --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4);

  --viz-grid: #1F362B;
  --viz-axis: #6F7D74;
}