@layer tokens {
/* ═══════════════════════════════════════════════
   BAJKOLAB Design Tokens
   "Enchanted Paper Workshop" Brand System
   ═══════════════════════════════════════════════ */

:root {
  /* ─── Ink (Primary Dark) ─── */
  --ink:            oklch(0.18 0.04 270);
  --ink-90:         oklch(0.25 0.04 270);
  --ink-80:         oklch(0.32 0.03 270);
  --ink-60:         oklch(0.45 0.03 270);
  --ink-40:         oklch(0.58 0.02 270);
  --ink-20:         oklch(0.72 0.01 270);
  --ink-10:         oklch(0.85 0.01 270);

  /* ─── Parchment (Background) ─── */
  --parchment:        oklch(0.97 0.012 80);
  --parchment-warm:   oklch(0.95 0.018 78);
  --parchment-deep:   oklch(0.92 0.020 76);
  --parchment-paper:  oklch(0.99 0.005 85);

  /* ─── Gold (Magic, Warmth, CTA) ─── */
  --gold:           oklch(0.76 0.145 70);
  --gold-vivid:     oklch(0.80 0.155 72);
  --gold-dim:       oklch(0.65 0.12  70);
  --gold-glow:      oklch(0.88 0.09  78);
  --gold-pale:      oklch(0.94 0.04  80);

  /* ─── Berry (Enchantment, Accent) ─── */
  --berry:          oklch(0.52 0.19 350);
  --berry-vivid:    oklch(0.58 0.21 352);
  --berry-light:    oklch(0.72 0.12 350);
  --berry-pale:     oklch(0.92 0.04 350);

  /* ─── Forest (Nature, Adventure) ─── */
  --forest:         oklch(0.42 0.10 160);
  --forest-light:   oklch(0.58 0.08 160);
  --forest-pale:    oklch(0.92 0.03 160);

  /* ─── Sky (Dream, Imagination) ─── */
  --sky:            oklch(0.68 0.10 240);
  --sky-light:      oklch(0.82 0.06 240);
  --sky-pale:       oklch(0.95 0.02 240);

  /* ─── Semantic ─── */
  --success:        oklch(0.58 0.14 150);
  --success-pale:   oklch(0.92 0.04 150);
  --warning:        oklch(0.78 0.14 80);
  --warning-pale:   oklch(0.95 0.04 80);
  --error:          oklch(0.55 0.20 25);
  --error-pale:     oklch(0.93 0.04 25);

  /* ─── Surface & Text ─── */
  --surface:        oklch(1.0 0 0);
  --surface-raised: oklch(1.0 0 0);
  --text:           oklch(0.22 0.03 270);
  --text-secondary: oklch(0.45 0.02 270);
  --text-muted:     oklch(0.58 0.015 270);
  --text-on-dark:   oklch(0.95 0.01 80);
  --text-on-gold:   oklch(0.18 0.04 60);
  --border:         oklch(0.88 0.01 80);
  --border-subtle:  oklch(0.92 0.008 80);

  /* ═══ Typography ═══ */
  --font-display:   'Cormorant Garamond', 'Georgia', serif;
  --font-body:      'Outfit', system-ui, sans-serif;
  --font-handwritten: 'Caveat', cursive;

  /* Scale (major third - 1.25) */
  --text-xs:    0.64rem;   /* 10.24px */
  --text-sm:    0.8rem;    /* 12.8px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.563rem;  /* 25px */
  --text-2xl:   1.953rem;  /* 31.25px */
  --text-3xl:   2.441rem;  /* 39px */
  --text-4xl:   3.052rem;  /* 48.8px */
  --text-5xl:   3.815rem;  /* 61px */
  --text-hero:  clamp(2.5rem, 6vw, 5rem);

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;
  --tracking-wider:  0.06em;

  /* ═══ Spacing (8px base) ═══ */
  --space-1:   0.25rem;    /* 4 */
  --space-2:   0.5rem;     /* 8 */
  --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 */

  /* ═══ Borders & Radius ═══ */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;
  --radius-book: 4px 12px 12px 4px;  /* Book spine shape */

  /* ═══ Shadows (warm-tinted) ═══ */
  --shadow-sm:   0 1px 3px oklch(0.18 0.03 70 / 0.06),
                 0 1px 2px oklch(0.18 0.03 70 / 0.04);
  --shadow-md:   0 4px 12px oklch(0.18 0.03 70 / 0.08),
                 0 2px 4px oklch(0.18 0.03 70 / 0.04);
  --shadow-lg:   0 12px 32px oklch(0.18 0.03 70 / 0.10),
                 0 4px 8px oklch(0.18 0.03 70 / 0.06);
  --shadow-xl:   0 20px 48px oklch(0.18 0.03 70 / 0.14),
                 0 8px 16px oklch(0.18 0.03 70 / 0.08);
  --shadow-glow: 0 0 30px oklch(0.76 0.145 70 / 0.25);
  --shadow-page: 4px 4px 0 oklch(0.18 0.04 270 / 0.06);

  /* ═══ Layout ═══ */
  --max-width:       72rem;
  --max-width-narrow: 36rem;
  --max-width-mid:   48rem;
  --max-width-wide:  84rem;
  --nav-height:      4rem;

  /* ═══ Transitions ═══ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;

  /* ═══ Textures ═══ */
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

}