/* Seeds and Wonder, Design Tokens v2
   Mobile-first. Deep navy/teal/parchment palette. Playfair display + Inter body.
   Author: Cowork pit-wall. Date: 2026-04-27.
*/
:root {
  /* Core palette, light mode default */
  --ink:        #0E1F2C;   /* deep navy, primary text */
  --ink-soft:   #243B4A;
  --teal:       #0F6E63;
  --teal-soft:  #2A8F84;
  --teal-mist:  #DCEDE9;
  --gold:       #B8893A;
  --gold-soft:  #E9D6A6;
  --parchment:  #F8F2E5;
  --paper:      #FFFCF5;
  --rule:       #D9CFB8;
  --muted:      #5A6B73;
  --danger:     #B23A48;

  /* Type scale */
  --display-font: "Playfair Display", Georgia, serif;
  --body-font:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono-font:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* Sizing, mobile-first base */
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.85rem);
  --step-0:  clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --step-1:  clamp(1.10rem, 1.0rem + 0.5vw, 1.25rem);
  --step-2:  clamp(1.30rem, 1.15rem + 0.75vw, 1.55rem);
  --step-3:  clamp(1.55rem, 1.30rem + 1.2vw, 2.00rem);
  --step-4:  clamp(1.85rem, 1.5rem + 1.8vw, 2.55rem);
  --step-5:  clamp(2.20rem, 1.7rem + 2.6vw, 3.20rem);

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  /* Radii and shadow */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --shadow-1: 0 1px 2px rgba(14,31,44,0.06), 0 4px 12px rgba(14,31,44,0.06);
  --shadow-2: 0 4px 14px rgba(14,31,44,0.10), 0 12px 36px rgba(14,31,44,0.10);

  /* Surfaces and chrome */
  --bg:        var(--paper);
  --surface:   var(--parchment);
  --surface-2: #FFFFFF;
  --on-bg:     var(--ink);
  --on-surface: var(--ink);
  --link:      var(--teal);
  --accent:    var(--gold);
}

/* Dark mode via prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #E9F1F5;
    --ink-soft:   #C8D6DD;
    --teal:       #5FB8AC;
    --teal-soft:  #8BD3C7;
    --teal-mist:  #1A2F33;
    --gold:       #E2BB6A;
    --gold-soft:  #6F5A2D;
    --parchment:  #122230;
    --paper:      #0B1822;
    --rule:       #2A3D49;
    --muted:      #94A4AC;
    --danger:     #FF7A85;

    --bg:         var(--paper);
    --surface:    var(--parchment);
    --surface-2:  #18293A;
    --on-bg:      var(--ink);
    --on-surface: var(--ink);
    --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 6px 16px rgba(0,0,0,0.35);
    --shadow-2: 0 4px 14px rgba(0,0,0,0.5),  0 14px 40px rgba(0,0,0,0.45);
  }
}

/* Forced override class, also exposes manual toggle if needed */
[data-theme="dark"] {
  color-scheme: dark;
}
[data-theme="light"] {
  color-scheme: light;
}

/* Breakpoints, used in template via min-width media queries
   --bp-sm: 480px, --bp-md: 720px, --bp-lg: 1024px, --bp-xl: 1280px */