/* Framlo brand tokens. The single source for color, type, spacing, radius and motion.
   Dark (Ink) is the default; light (peach and white) follows the system or html[data-theme="light"]. */

@font-face {
  font-family: Parkinsans;
  src: url('/fonts/parkinsans-variable.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Newsreader;
  src: url('/fonts/newsreader-italic-variable.woff2') format('woff2');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* The four brand colors */
  --ink: #141517;
  --peach: #efb88f;
  --plaster: #f4f1ec;
  --clay: #a8572b;
  --clay-text: #9a4f25; /* clay deepened a touch for small text on peach tints (AA) */
  --peach-hover: #f5cdb0;

  /* Roles: dark mode */
  --bg: var(--ink);
  --surface: rgba(244, 241, 236, 0.05);
  --band: rgba(239, 184, 143, 0.08);
  --line: rgba(244, 241, 236, 0.14);
  --text: var(--plaster);
  --text-muted: rgba(244, 241, 236, 0.7);
  --accent: var(--peach);
  --accent-fill: var(--peach);
  --accent-on-band: var(--peach);
  --on-accent: var(--ink);
  --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.45);
  --focus-ring: rgba(239, 184, 143, 0.25);
  color-scheme: dark;

  /* Type */
  --font-sans: Parkinsans, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent: Newsreader, Georgia, 'Times New Roman', serif;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* Corners */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Motion: Glide */
  --ease-glide: cubic-bezier(.65, 0, .35, 1);
  --dur-reveal: 1400ms;
  --dur-scene: 2600ms;
  --dur-hover: 500ms;
  --dur-press: 150ms;
  --stagger: 200ms;
}

/* Light mode: peach and white */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg: var(--plaster);
    --surface: rgba(239, 184, 143, 0.22);
    --band: var(--peach);
    --line: rgba(20, 21, 23, 0.14);
    --text: var(--ink);
    --text-muted: rgba(20, 21, 23, 0.7);
    --accent: var(--clay-text);
    --accent-on-band: var(--ink);
    --shadow-float: 0 16px 40px rgba(20, 21, 23, 0.12);
    --focus-ring: rgba(168, 87, 43, 0.25);
    color-scheme: light;
  }
}
:root[data-theme='light'] {
  --bg: var(--plaster);
  --surface: rgba(239, 184, 143, 0.22);
  --band: var(--peach);
  --line: rgba(20, 21, 23, 0.14);
  --text: var(--ink);
  --text-muted: rgba(20, 21, 23, 0.7);
  --accent: var(--clay-text);
  --accent-on-band: var(--ink);
  --shadow-float: 0 16px 40px rgba(20, 21, 23, 0.12);
  --focus-ring: rgba(168, 87, 43, 0.25);
  color-scheme: light;
}