/* ============================================================
   BUNDLEAF — DESIGN TOKENS
   Single source of truth. Primitive palette + semantic aliases
   + type / space / radius / elevation / motion.
   Naming mirrors Tailwind v4 @theme keys so these map 1:1 into
   an @theme block in production (e.g. --color-bundleaf-primary).
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     1. PRIMITIVE PALETTE  (raw, never used directly in product)
     ---------------------------------------------------------- */

  /* Pine — brand green. Anchor = pine-600 (#2F5D50) */
  --color-pine-50:  #EEF4F1;
  --color-pine-100: #D6E5DE;
  --color-pine-200: #AECabe;
  --color-pine-300: #7FAB9A;
  --color-pine-400: #4F8975;
  --color-pine-500: #3A6E5E;
  --color-pine-600: #2F5D50;  /* PRIMARY */
  --color-pine-700: #264B41;
  --color-pine-800: #1D3A32;
  --color-pine-900: #142824;
  --color-pine-950: #0C1815;

  /* Leaf — bright accent / success. Anchor = leaf-400 (#A7C957) */
  --color-leaf-50:  #F5F8EC;
  --color-leaf-100: #E9F0D3;
  --color-leaf-200: #D4E3A9;
  --color-leaf-300: #BDD47C;
  --color-leaf-400: #A7C957;  /* ACCENT */
  --color-leaf-500: #8DB23C;
  --color-leaf-600: #6F8C2E;
  --color-leaf-700: #556B26;
  --color-leaf-800: #3F4F20;
  --color-leaf-900: #2C371A;
  --color-leaf-950: #161C0D;

  /* Sand — warm earthy neutral. Anchor text = sand-800 (Bark) */
  --color-sand-50:  #FAF8F4;
  --color-sand-100: #F3EFE8;
  --color-sand-200: #E9E3D8;
  --color-sand-300: #D8D0C2;  /* Mushroom */
  --color-sand-400: #BCB2A1;
  --color-sand-500: #978C7B;
  --color-sand-600: #756B5C;
  --color-sand-700: #564E44;
  --color-sand-800: #3B332C;  /* Bark */
  --color-sand-900: #2A241F;
  --color-sand-950: #181410;

  /* River — info (cool blue-slate) */
  --color-river-50:  #EEF3F8;
  --color-river-100: #D8E3EF;
  --color-river-300: #9DB6CF;
  --color-river-500: #5C7FA3;
  --color-river-600: #4A6A8C;
  --color-river-700: #3B5572;

  /* Berry — secondary (muted plum) */
  --color-berry-50:  #F4EDF2;
  --color-berry-100: #E5D5E0;
  --color-berry-500: #6E4A64;
  --color-berry-600: #5C3C53;
  --color-berry-700: #4A3043;

  /* Clay — destructive (terracotta) */
  --color-clay-50:  #FaeeeB;
  --color-clay-100: #F3D8D0;
  --color-clay-500: #B85C4B;
  --color-clay-600: #9E4A3B;
  --color-clay-700: #813A2F;

  /* Amber — warning / attention (ochre) */
  --color-amber-50:  #FaF3E3;
  --color-amber-100: #F4E6C3;
  --color-amber-500: #C9922E;
  --color-amber-600: #A87825;
  --color-amber-700: #855E1E;

  /* Pure */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* ----------------------------------------------------------
     2. TYPOGRAPHY tokens (theme-independent)
     ---------------------------------------------------------- */
  --font-display: "Sora", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* size / line-height pairs */
  --text-display-xl: 4.5rem;   --lh-display-xl: 1.04;  /* 72 */
  --text-display-l:  3.5rem;   --lh-display-l:  1.06;  /* 56 */
  --text-h1: 2.5rem;           --lh-h1: 1.12;          /* 40 */
  --text-h2: 2rem;             --lh-h2: 1.16;          /* 32 */
  --text-h3: 1.5rem;           --lh-h3: 1.25;          /* 24 */
  --text-h4: 1.25rem;          --lh-h4: 1.3;           /* 20 */
  --text-h5: 1.0625rem;        --lh-h5: 1.4;           /* 17 */
  --text-h6: 0.9375rem;        --lh-h6: 1.4;           /* 15 */
  --text-body-lg: 1.125rem;    --lh-body-lg: 1.6;      /* 18 */
  --text-body:    1rem;        --lh-body: 1.6;         /* 16 */
  --text-body-sm: 0.875rem;    --lh-body-sm: 1.55;     /* 14 */
  --text-caption: 0.75rem;     --lh-caption: 1.4;      /* 12 */
  --text-mono:    0.8125rem;   --lh-mono: 1.5;         /* 13 */

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.011em;
  --tracking-normal: 0;
  --tracking-wide:  0.02em;
  --tracking-caps:  0.06em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ----------------------------------------------------------
     3. SPACING — 4px base grid
     ---------------------------------------------------------- */
  --space-0: 0;
  --space-px: 1px;
  --space-0_5: 0.125rem; /* 2 */
  --space-1: 0.25rem;    /* 4 */
  --space-1_5: 0.375rem; /* 6 */
  --space-2: 0.5rem;     /* 8 */
  --space-2_5: 0.625rem; /* 10 */
  --space-3: 0.75rem;    /* 12 */
  --space-4: 1rem;       /* 16 */
  --space-5: 1.25rem;    /* 20 */
  --space-6: 1.5rem;     /* 24 */
  --space-8: 2rem;       /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */

  /* ----------------------------------------------------------
     4. RADIUS
     ---------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;
  --radius-full: 999px;

  /* ----------------------------------------------------------
     5. MOTION
     ---------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ----------------------------------------------------------
     6. Z-INDEX
     ---------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-dropdown: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}

/* ============================================================
   7. SEMANTIC ALIASES — LIGHT THEME (default)
   These are what product code references.
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* surfaces & background */
  --color-bundleaf-bg:            var(--color-sand-50);   /* page */
  --color-bundleaf-surface:       var(--color-white);     /* cards / panels */
  --color-bundleaf-surface-muted: var(--color-sand-100);  /* inset / header rows */
  --color-bundleaf-surface-sunken: var(--color-sand-200); /* wells / track */
  --color-bundleaf-overlay:       rgba(24, 20, 16, 0.44); /* scrim */

  /* text */
  --color-bundleaf-foreground:        var(--color-sand-900);
  --color-bundleaf-foreground-strong: var(--color-sand-950);
  --color-bundleaf-muted-foreground:  var(--color-sand-600);
  --color-bundleaf-subtle-foreground: var(--color-sand-500);
  --color-bundleaf-on-primary:        var(--color-white);
  --color-bundleaf-on-accent:         var(--color-leaf-950);

  /* borders & rings */
  --color-bundleaf-border:        var(--color-sand-200);
  --color-bundleaf-border-strong: var(--color-sand-300);
  --color-bundleaf-ring:          rgba(47, 93, 80, 0.45);

  /* primary (Pine) */
  --color-bundleaf-primary:         var(--color-pine-600);
  --color-bundleaf-primary-hover:   var(--color-pine-700);
  --color-bundleaf-primary-active:  var(--color-pine-800);
  --color-bundleaf-primary-soft:    var(--color-pine-50);
  --color-bundleaf-primary-surface: var(--color-pine-100);
  --color-bundleaf-primary-foreground: var(--color-pine-700);

  /* accent (Leaf) */
  --color-bundleaf-accent:        var(--color-leaf-400);
  --color-bundleaf-accent-strong: var(--color-leaf-600);
  --color-bundleaf-accent-soft:   var(--color-leaf-50);

  /* secondary (Berry) */
  --color-bundleaf-secondary:        var(--color-berry-500);
  --color-bundleaf-secondary-soft:   var(--color-berry-50);
  --color-bundleaf-secondary-foreground: var(--color-berry-600);

  /* semantic status */
  --color-bundleaf-success:        var(--color-leaf-600);
  --color-bundleaf-success-soft:   var(--color-leaf-50);
  --color-bundleaf-success-foreground: var(--color-leaf-700);

  --color-bundleaf-info:           var(--color-river-500);
  --color-bundleaf-info-soft:      var(--color-river-50);
  --color-bundleaf-info-foreground: var(--color-river-700);

  --color-bundleaf-attention:        var(--color-amber-500);
  --color-bundleaf-attention-soft:   var(--color-amber-50);
  --color-bundleaf-attention-foreground: var(--color-amber-700);

  --color-bundleaf-destructive:        var(--color-clay-500);
  --color-bundleaf-destructive-soft:   var(--color-clay-50);
  --color-bundleaf-destructive-foreground: var(--color-clay-700);

  /* metadata / mono (Slate) */
  --color-bundleaf-meta: var(--color-river-600);

  /* elevation — warm-tinted shadows, never pure black */
  --shadow-xs: 0 1px 2px rgba(40, 33, 25, 0.05);
  --shadow-sm: 0 1px 2px rgba(40, 33, 25, 0.06), 0 1px 3px rgba(40, 33, 25, 0.08);
  --shadow-md: 0 2px 4px rgba(40, 33, 25, 0.06), 0 4px 12px rgba(40, 33, 25, 0.08);
  --shadow-lg: 0 6px 16px rgba(40, 33, 25, 0.10), 0 2px 6px rgba(40, 33, 25, 0.06);
  --shadow-xl: 0 16px 40px rgba(40, 33, 25, 0.16), 0 4px 12px rgba(40, 33, 25, 0.08);
  --shadow-focus: 0 0 0 3px var(--color-bundleaf-ring);
}

/* ============================================================
   8. SEMANTIC ALIASES — DARK THEME
   Premium, calm, warm near-black. Brand lifted for vibrancy.
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --color-bundleaf-bg:            #14110D;
  --color-bundleaf-surface:       #1C1813;
  --color-bundleaf-surface-muted: #221D16;
  --color-bundleaf-surface-sunken: #100D0A;
  --color-bundleaf-overlay:       rgba(0, 0, 0, 0.6);

  --color-bundleaf-foreground:        #ECE6DB;
  --color-bundleaf-foreground-strong: #F7F3EC;
  --color-bundleaf-muted-foreground:  #9C9384;
  --color-bundleaf-subtle-foreground: #756B5C;
  --color-bundleaf-on-primary:        #FFFFFF;
  --color-bundleaf-on-accent:         #161C0D;

  --color-bundleaf-border:        #332D25;
  --color-bundleaf-border-strong: #443D32;
  --color-bundleaf-ring:          rgba(127, 171, 154, 0.5);

  --color-bundleaf-primary:         #37715F;
  --color-bundleaf-primary-hover:   #41846F;
  --color-bundleaf-primary-active:  #2C5E50;
  --color-bundleaf-primary-soft:    #1A2823;
  --color-bundleaf-primary-surface: #21342D;
  --color-bundleaf-primary-foreground: var(--color-pine-300);

  --color-bundleaf-accent:        var(--color-leaf-400);
  --color-bundleaf-accent-strong: var(--color-leaf-300);
  --color-bundleaf-accent-soft:   #232A14;

  --color-bundleaf-secondary:        #9E7592;
  --color-bundleaf-secondary-soft:   #2A1F27;
  --color-bundleaf-secondary-foreground: #C4A2BB;

  --color-bundleaf-success:        var(--color-leaf-300);
  --color-bundleaf-success-soft:   #232A14;
  --color-bundleaf-success-foreground: var(--color-leaf-200);

  --color-bundleaf-info:           #84A4C6;
  --color-bundleaf-info-soft:      #19222C;
  --color-bundleaf-info-foreground: #AcC4dD;

  --color-bundleaf-attention:        #DCAE55;
  --color-bundleaf-attention-soft:   #2C2412;
  --color-bundleaf-attention-foreground: #E8C886;

  --color-bundleaf-destructive:        #D27E6E;
  --color-bundleaf-destructive-soft:   #2C1A15;
  --color-bundleaf-destructive-foreground: #E0A294;

  --color-bundleaf-meta: #8FA6BC;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 22px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px var(--color-bundleaf-ring);
}