/* Syllara design tokens — copied from briefs/syllara-design.md.
   Do not invent new colors here; amend design.md first. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-VF.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-VF.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Theme */
  --color-paper: oklch(97% 0.012 95);
  --color-paper-2: oklch(94% 0.016 95);
  --color-paper-3: oklch(91% 0.020 95);
  --color-paper-raised: oklch(99% 0.008 95);
  --color-ink: oklch(20% 0.012 250);
  --color-ink-soft: oklch(34% 0.014 250);
  --color-muted: oklch(43% 0.012 250);
  --color-rule: oklch(79% 0.018 95);
  --color-pear: oklch(86% 0.18 95);      /* primary actions and current work */
  --color-cyan: oklch(66% 0.18 235);     /* links, focus, assistance */
  --color-coral: oklch(68% 0.24 18);     /* alerts, one high-energy moment */
  --color-mint: oklch(80% 0.16 150);     /* success and completed work */
  --color-lavender: oklch(74% 0.16 305); /* secondary context and tags */
  --color-focus: oklch(30% 0.14 235);

  /* Text-safe shades of the accents (same hue, darker, for 4.5:1 text on paper)
     and soft tints for surfaces. Derived, not new hues. */
  --color-pear-edge: oklch(68% 0.15 95);
  --color-pear-soft: oklch(94% 0.08 95);
  --color-cyan-ink: oklch(45% 0.15 235);
  --color-cyan-soft: oklch(94% 0.04 235);
  --color-coral-ink: oklch(48% 0.19 18);
  --color-coral-soft: oklch(94% 0.04 18);
  --color-mint-ink: oklch(40% 0.10 150);
  --color-mint-soft: oklch(94% 0.06 150);
  --color-lavender-soft: oklch(93% 0.05 305);

  /* Type */
  --font-sans: 'Plus Jakarta Sans', ui-rounded, 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --tracking-display: -0.025em;
  --leading-body: 1.5;
  --text-title: clamp(1.65rem, 2vw + 1rem, 2.5rem);
  --text-hero: clamp(2.4rem, 6vw + 1rem, 4.5rem);

  /* 4-point named spacing scale */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-8: 2rem;     /* 32 */
  --space-10: 2.5rem;  /* 40 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-20: 5rem;    /* 80 */

  /* Shape */
  --radius-input: 12px;
  --radius-control: 16px;
  --radius-card: 20px;
  --radius-stage: 30px;
  --radius-pill: 999px;

  /* Surface physics */
  --shadow-raised: 0 1px 1px oklch(20% 0.012 250 / 0.08), 0 8px 24px -12px oklch(20% 0.012 250 / 0.22);
  --shadow-lift: 0 2px 2px oklch(20% 0.012 250 / 0.08), 0 14px 30px -14px oklch(20% 0.012 250 / 0.28);

  /* Targets */
  --tap: 48px;
  --tap-big: 56px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 160ms;
}