/* EtudeSpark design tokens — Hallmark editorial (warm), ported to OKLCH.
 * Portable copy of the token block in site/styles.css :root.
 * Genre: editorial · Display: Fraunces · Body: Nunito Sans. */

:root {
  /* Paper (warm oat) */
  --paper: oklch(94.5% 0.019 83.1);
  --paper-soft: oklch(97.4% 0.014 84.6);
  --paper-warm: oklch(98.1% 0.018 81.3);
  --paper-deep: oklch(93% 0.022 83.3);

  /* Ink */
  --ink: oklch(27.2% 0.013 72.3);
  --ink-soft: oklch(50.8% 0.025 76.3);
  --ink-faint: oklch(65.5% 0.028 78.8);

  /* Accent + secondary hues */
  --ember: oklch(54.3% 0.121 43.9);
  --ember-strong: oklch(46.5% 0.116 32.1);
  --honey: oklch(75.8% 0.127 71.7);
  --sage: oklch(54.8% 0.064 137.4);
  --sky: oklch(75.3% 0.08 228.5);
  --coral: oklch(71.1% 0.147 30.7);
  --footer-bg: oklch(23% 0.01 67.3);

  /* Lines + focus */
  --hairline: oklch(27% 0.013 72 / 0.16);
  --hairline-light: oklch(97% 0.014 85 / 0.16);
  --focus: var(--ember-strong);
  --focus-light: oklch(97.4% 0.014 84.6);

  /* Type */
  --serif: "Fraunces", ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --sans: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 10px;

  /* 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-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;

  /* Z-index scale */
  --z-sticky: 200;
  --z-spark: 500;

  /* Fluid spacing scale (min @360px -> max @1240px) */
  --space-2xs: clamp(0.5rem, 0.42rem + 0.35vw, 0.75rem);
  --space-xs: clamp(0.75rem, 0.6rem + 0.7vw, 1.25rem);
  --space-sm: clamp(1.125rem, 0.9rem + 1vw, 1.75rem);
  --space-md: clamp(1.5rem, 1.1rem + 1.8vw, 2.75rem);
  --space-lg: clamp(2.5rem, 1.85rem + 2.9vw, 4.5rem);
  --space-xl: clamp(4rem, 2.8rem + 5.3vw, 8rem);
  --space-2xl: clamp(5.5rem, 3.9rem + 7vw, 10.25rem);

  /* Layout primitives */
  --shell-max: 760px;
  --gutter: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  --header-h: 66px;
}

/* Teacher product tour additions. */
:root {
  --tour-max: 1120px;
  --color-surface-sage: oklch(91.5% 0.027 132);
  --color-surface-sand: oklch(90% 0.035 80);
  --color-surface-sky: oklch(93% 0.025 225);
  --color-surface-honey: oklch(93% 0.047 82);
  --color-on-dark-muted: oklch(97.4% 0.014 84.6 / 0.8);
  --color-modal-backdrop: oklch(23% 0.01 67.3 / 0.78);
  --text-display: clamp(3rem, 2.2rem + 3.4vw, 5.25rem);
  --text-caption: 0.875rem;
  --color-screenshot-frame: oklch(98.5% 0.008 83);
  --color-screenshot-edge: oklch(68% 0.016 75);
  --shadow-screenshot: 0 24px 48px -8px oklch(27.2% 0.013 72.3 / 0.34), 0 8px 16px -4px oklch(27.2% 0.013 72.3 / 0.24);
  --space-screenshot-frame: 16px;
  --color-device-bezel: oklch(20% 0.008 75);
  --color-device-edge: oklch(53% 0.012 75);
  --color-device-camera: oklch(31% 0.025 245);
  --radius-device: 28px;
  --radius-device-screen: 12px;
}
@media (max-width: 640px) {
  :root { --header-h: 56px; }
}