/* Homeschool Town — design tokens
   Canonical color space: OKLCH. Hex equivalents noted for reference only.
   Direction: white base, whisper-light clay washes, deep terracotta carries
   CTAs/links, botanical green accent. All pairings AA-verified. */

/* ---- Fonts (self-hosted variable woff2) ---- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/hanken-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/hanken-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---- Color (OKLCH) ---- */
  --bg:              oklch(1 0 0);              /* #ffffff */
  --bg-wash:         oklch(0.975 0.010 58);     /* #fcf5f0 — page gradient foot */
  --surface:         oklch(0.985 0.006 60);     /* #fdfaf6 — flat card fallback */
  --surface-top:     oklch(0.995 0.004 65);     /* #fffdfb */
  --surface-bot:     oklch(0.966 0.013 55);     /* #fbf2ec */
  --hero-top:        oklch(0.992 0.006 65);     /* #fffcf8 */
  --hero-bot:        oklch(0.953 0.018 50);     /* #faece5 */

  --ink:             oklch(0.255 0.012 50);     /* #28211e — body text, 15.8:1 on bg */
  --ink-soft:        oklch(0.34 0.014 48);      /* secondary headings */
  --muted:           oklch(0.50 0.012 50);      /* #69615d — meta, 6.0:1 on bg */

  --clay:            oklch(0.66 0.088 45);      /* #c08165 — soft decorative warmth, icons */
  --clay-tint:       oklch(0.93 0.025 50);      /* faint clay fill */
  --primary:         oklch(0.47 0.115 40);      /* #8f4023 — deep terracotta, CTAs + links */
  --primary-hover:   oklch(0.40 0.105 38);      /* #752f18 */
  --on-primary:      oklch(1 0 0);              /* white text on terracotta, 7.2:1 */

  --accent:          oklch(0.52 0.105 150);     /* #357a47 — botanical green, tags/pins */
  --accent-hover:    oklch(0.42 0.10 150);      /* #195c2e */
  --accent-tint:     oklch(0.94 0.03 150);      /* faint green fill */
  --on-accent:       oklch(1 0 0);              /* white on green, 5.3:1 */

  --border:          oklch(0.255 0.012 50 / 0.12);
  --border-strong:   oklch(0.255 0.012 50 / 0.22);
  --border-warm:     oklch(0.47 0.115 40 / 0.16);
  --focus:           oklch(0.52 0.105 150);     /* green focus ring — distinct from terracotta */
  --error:           oklch(0.505 0.175 27);      /* clear warm red for validation — 4.7:1 on bg */
  --error-tint:      oklch(0.955 0.028 30);      /* faint red wash for error summary */
  --warning:         oklch(0.52 0.13 78);         /* #915d00 — ochre, moderation pending/edits — 5.6:1 on bg */
  --warning-tint:    oklch(0.955 0.035 75);       /* faint amber wash for moderation banners */

  /* ---- Gradients (within-hue warm washes; not SaaS-mesh) ---- */
  --grad-page:    linear-gradient(180deg, var(--bg) 0%, var(--bg-wash) 100%);
  --grad-hero:    linear-gradient(165deg, var(--hero-top) 0%, var(--hero-bot) 100%);
  --grad-surface: linear-gradient(180deg, var(--surface-top) 0%, var(--surface-bot) 100%);

  /* ---- Typography ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-display: clamp(2.4rem, 1.4rem + 4.4vw, 4.2rem);   /* ceiling ~67px, < 6rem */
  --t-h1:      clamp(2rem, 1.4rem + 2.6vw, 3rem);
  --t-h2:      clamp(1.55rem, 1.2rem + 1.5vw, 2.15rem);
  --t-h3:      clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);
  --t-lead:    clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  --t-body:    1.0625rem;   /* 17px */
  --t-sm:      0.9375rem;   /* 15px */
  --t-xs:      0.8125rem;   /* 13px */
  --measure:   68ch;

  /* ---- Spacing ---- */
  --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;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;
  --container: 75rem;          /* 1200px */
  --container-prose: 44rem;    /* article measure */

  /* ---- Radius ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  /* ---- Elevation (earned — applied on hover/focus, warm-tinted) ---- */
  --shadow-sm: 0 1px 2px oklch(0.40 0.06 45 / 0.06), 0 2px 8px oklch(0.40 0.06 45 / 0.05);
  --shadow-md: 0 4px 12px oklch(0.40 0.06 45 / 0.10), 0 12px 28px oklch(0.40 0.06 45 / 0.10);
  --shadow-lg: 0 10px 24px oklch(0.40 0.06 45 / 0.12), 0 24px 56px oklch(0.40 0.06 45 / 0.14);

  /* ---- Motion ---- */
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1);
  --dur-fast: 140ms;
  --dur:      240ms;
  --dur-slow: 420ms;

  /* ---- Z-index scale ---- */
  --z-base: 1; --z-dropdown: 1000; --z-sticky: 1100;
  --z-modal-backdrop: 1200; --z-modal: 1300; --z-toast: 1400; --z-tooltip: 1500;
}