/* ============================================================
   Soul Creatures' Land — Design Tokens
   Ported from design_handoff_personal_library/prototype/design-tokens.css
   Source of truth for colors, type, spacing, radii, shadows.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Quicksand:wght@400;500;600;700&family=Nunito:wght@400;500;600;700;800&family=Caveat:wght@400;600&display=swap');

:root {
  /* ============================================================
     Brand colors — primary palette
     Hex values match the JSX prototype usage; oklch comments are
     the canonical source-of-truth from design-tokens.css.
     ============================================================ */

  /* --- Surfaces --- */
  --brand-cream:        #fbf5ea;            /* oklch(97% 0.015 80)  page surface */
  --brand-paper:        #fef9ee;            /* oklch(99% 0.01 80)   card surface (raised) */
  --brand-ivory:        #f4ecd8;            /* sunken surface, language pill, soft chips */
  --brand-sunken:       #f0eee9;            /* alternate sunken used in JSX */

  /* --- Inks / text --- */
  --brand-plum:         #66304c;            /* primary brand color: headings, wordmark */
  --brand-plum-deep:    #5b3a4a;            /* deeper plum used in dropdown/borders */
  --brand-navy:         #272763;            /* nav link, "My Library" link */
  --brand-ink:          oklch(28% 0.025 50);   /* body copy on cream */
  --brand-ink-soft:     oklch(45% 0.025 50);   /* secondary text */
  --brand-ink-faint:    oklch(60% 0.02 60);    /* tertiary / captions */

  /* --- Accents / CTA --- */
  --brand-coral:        #c96442;            /* oklch(70% 0.16 35)   coral — primary CTA */
  --brand-coral-deep:   #c0392b;            /* CTA hover */
  --brand-terracotta:   oklch(58% 0.13 45); /* deep warm — strong text on cream */
  --brand-peach:        oklch(82% 0.10 50); /* warm peach — soft buttons */
  --brand-gold:         oklch(80% 0.13 85); /* sunlight — secondary highlight */
  --brand-sage:         oklch(72% 0.07 145);/* gentle sage — Powers accent */
  --brand-rose:         oklch(75% 0.10 5);  /* dusty rose — Imps accent */

  /* --- Aliases (legacy compat) --- */
  --brand-denim:        var(--brand-navy);
  --brand-denim-deep:   #1a1a4d;

  /* ============================================================
     Reader (dark mode for BookReader)
     ============================================================ */
  --reader-stage-from:  #3a2530;
  --reader-stage-to:    #1f1418;
  --reader-toolbar:     #1a0f15;
  --reader-thumbs:      #15090e;

  /* ============================================================
     Neutrals
     ============================================================ */
  --neutral-0:   #ffffff;
  --neutral-50:  oklch(98% 0.005 80);
  --neutral-100: oklch(96% 0.008 80);
  --neutral-200: oklch(92% 0.01 80);
  --neutral-300: oklch(85% 0.012 75);
  --neutral-400: #a89878;
  --neutral-500: oklch(55% 0.02 65);
  --neutral-600: oklch(42% 0.025 60);
  --neutral-700: oklch(32% 0.025 55);
  --neutral-800: #2a251f;
  --neutral-900: #29261b;

  /* ============================================================
     Semantic colors — use these in components
     ============================================================ */
  --bg:            var(--brand-cream);
  --bg-raised:     var(--brand-paper);
  --bg-sunken:     var(--brand-ivory);
  --fg:            var(--brand-ink);
  --fg-soft:       var(--brand-ink-soft);
  --fg-faint:      var(--brand-ink-faint);
  --fg-on-coral:   #fefbf5;
  --fg-on-navy:    #fefbf5;
  --link:          var(--brand-navy);
  --link-hover:    var(--brand-denim-deep);
  --primary:       var(--brand-coral);
  --primary-hover: var(--brand-coral-deep);
  --accent:        var(--brand-navy);
  --success:       oklch(62% 0.13 145);
  --warning:       var(--brand-gold);
  --danger:        oklch(58% 0.18 25);
  --border:        #e8dec7;                 /* warm soft border (used 8x in JSX) */
  --border-soft:   #cfc8b8;

  /* Powers & Imps — character-category accents */
  --powers-accent: var(--brand-sage);
  --imps-accent:   var(--brand-rose);

  /* ============================================================
     Type families
     Display: Cormorant Garamond — book titles, hero headings
     UI:      Quicksand — nav, labels, buttons
     Body:    Nunito — paragraph text
     Hand:    Caveat — occasional handwritten flourish
     ============================================================ */
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-ui:      'Quicksand', 'Avenir Next', system-ui, sans-serif;
  --font-body:    'Nunito', 'Helvetica Neue', system-ui, sans-serif;
  --font-hand:    'Caveat', 'Bradley Hand', cursive;

  /* ============================================================
     Type scale (1.250 — major third)
     ============================================================ */
  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.125rem;  /* 18 */
  --fs-lg:   1.25rem;   /* 20 */
  --fs-xl:   1.5rem;    /* 24 */
  --fs-2xl:  1.875rem;  /* 30 */
  --fs-3xl:  2.25rem;   /* 36 */
  --fs-4xl:  3rem;      /* 48 */
  --fs-5xl:  3.75rem;   /* 60 */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-body:    1.55;
  --lh-loose:   1.75;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-allcaps: 0.08em;

  /* ============================================================
     Spacing (4px base)
     ============================================================ */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4  */
  --space-2: 0.5rem;    /* 8  */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */

  /* ============================================================
     Radii
     ============================================================ */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 9999px;

  /* ============================================================
     Shadows — all warm-tinted brown, never gray
     ============================================================ */
  --sh-1:     0 1px 2px rgba(120, 80, 40, 0.06);
  --sh-2:     0 2px 8px -2px rgba(120, 80, 40, 0.10);
  --sh-3:     0 8px 30px -8px rgba(120, 80, 40, 0.18);
  --sh-4:     0 16px 50px -12px rgba(80, 50, 25, 0.25);
  --sh-inset: inset 0 1px 2px rgba(120, 80, 40, 0.10);

  /* ============================================================
     Containers
     ============================================================ */
  --container-narrow: 720px;
  --container-md:     960px;
  --container-wide:   1200px;

  /* ============================================================
     Motion
     ============================================================ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;
}

/* ============================================================
   Base typographic styles
   Opt-in via .scl-tokens class on a wrapper, so legacy pages
   on the same site are not affected.
   ============================================================ */
.scl-tokens {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.scl-tokens h1, .scl-tokens .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--brand-plum);
}
.scl-tokens h2, .scl-tokens .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  font-weight: 700;
  color: var(--brand-plum);
}
.scl-tokens h3, .scl-tokens .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--brand-plum);
}
.scl-tokens h4, .scl-tokens .h4 {
  font-family: var(--font-ui);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg);
}

.scl-tokens .eyebrow,
.scl-tokens .section-label {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-allcaps);
  text-transform: uppercase;
  color: var(--brand-navy);
}

.scl-tokens p, .scl-tokens .body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg);
}

.scl-tokens .lede {
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--fg-soft);
}

.scl-tokens .caption {
  font-size: var(--fs-sm);
  color: var(--fg-faint);
}

.scl-tokens .hand {
  font-family: var(--font-hand);
  font-size: var(--fs-xl);
}

.scl-tokens a {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.scl-tokens a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

/* RTL support — set [dir="rtl"] on html or wrapper */
[dir="rtl"] .scl-tokens {
  text-align: right;
}