/* =========================================================
   Coto Hair — Design Tokens
   Mirrors docs/styleguide.css so the site stays on-brand.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Josefin+Sans:wght@300;400;500;600;700&display=swap");

:root {
  /* Brand palette — daylight neutrals + sienna accent */
  --c-ink: #2a2a2a;
  --c-mute: #6c6c6c;
  --c-line: rgba(0, 0, 0, 0.08);
  --c-line-strong: rgba(0, 0, 0, 0.18);

  --c-moss: #859695;       /* Primary (cool sage) */
  --c-bone: #e0dfda;       /* Warm neutral */
  --c-paper: #f5f0e6;      /* Background paper */
  --c-peach: #fbe4d7;      /* Accent peach */
  --c-sienna: #b56a4a;     /* Editorial accent (rule, italics) */

  --c-bg: var(--c-paper);
  --c-surface: #ffffff;
  --c-accent: var(--c-moss);
  --c-accent-ink: #ffffff;

  /* Type families */
  --f-display: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
  --f-text: "EB Garamond", Georgia, "Times New Roman", serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale — mobile-first, scales with viewport */
  --fs-eyebrow: 11px;
  --fs-meta: 13px;
  --fs-body: clamp(16px, 1.6vw, 18px);
  --fs-lead: clamp(18px, 2vw, 22px);
  --fs-h6: clamp(16px, 1.6vw, 18px);
  --fs-h5: clamp(19px, 2.2vw, 22px);
  --fs-h4: clamp(22px, 3vw, 28px);
  --fs-h3: clamp(28px, 4.4vw, 38px);
  --fs-h2: clamp(36px, 6.5vw, 52px);
  --fs-h1: clamp(46px, 10vw, 80px);
  --fs-display: clamp(56px, 14vw, 128px);

  /* Spacing scale (4/8) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.08);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-med: 280ms;
  --t-slow: 520ms;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 48px);
  --nav-h: 64px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}