/* ============================================================
   WO! Studio — Design Tokens (flattened)
   All CSS custom properties + @font-face + reveal primitive in one
   file. Mirror of the design system's styles.css import closure.
   Motion values also available as JS in motion.config.js.
   ============================================================ */


/* ---- tokens/fonts.css ---- */
/* ============================================================
   WO! Studio — Webfonts
   Fraunces (variable serif, editorial/display) + Inter (variable sans, UI/body)
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/Fraunces.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("assets/fonts/Fraunces-Italic.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Italic.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


/* ---- tokens/colors.css ---- */
/* ============================================================
   WO! Studio — Color
   Two layers: brand PRIMITIVES (raw values, never consumed
   directly by components) and SEMANTIC roles (what components use).
   Re-skin the whole system by remapping the semantic layer.
   ============================================================ */

:root {
  /* ---- Brand primitives — the seven ------------------------ */
  --wo-chalk: #fcfcfa;   /* Chalk — bright near-white, the default LIGHT BACKGROUND (distinct from beige Paper) */
  --wo-coral: #de6a6b;   /* WO Coral — the one accent */
  --wo-ink: #1d1c1c;     /* Ink — near-black, warm */
  --wo-paper: #f5f1ea;   /* Paper — warm off-white; now a usable SURFACE/ELEMENT tint */
  --wo-oxblood: #3d2f2a; /* Oxblood — deep warm brown, strong emphasis */
  --wo-bone: #d9cfc0;    /* Bone — warm mid neutral, raised surfaces */
  --wo-moss: #7a8471;    /* Moss — muted sage, secondary/organic accent */

  /* ---- Ink tints (derived; warm-grey, never neutral grey) -- */
  --wo-ink-90: rgba(29, 28, 28, 0.90);
  --wo-ink-70: rgba(29, 28, 28, 0.70);
  --wo-ink-55: rgba(29, 28, 28, 0.55); /* muted text */
  --wo-ink-30: rgba(29, 28, 28, 0.30);
  --wo-ink-15: rgba(29, 28, 28, 0.15); /* hairline rule */
  --wo-ink-08: rgba(29, 28, 28, 0.08);

  /* ---- Paper tints (text/rules on dark grounds) ------------ */
  --wo-paper-70: rgba(245, 241, 234, 0.70);
  --wo-paper-55: rgba(245, 241, 234, 0.55);
  --wo-paper-15: rgba(245, 241, 234, 0.15);

  /* ---- Coral / Oxblood states ----------------------------- */
  --wo-coral-strong: #c85c5d; /* coral pressed/active deepening */

  /* ============================================================
     SEMANTIC ROLES — components reference ONLY these
     ============================================================ */

  /* Surfaces — light backgrounds step up: Chalk → Paper → Bone */
  --surface-base: var(--wo-chalk);      /* default page ground (lightest, warm white) */
  --surface-paper: var(--wo-paper);     /* Paper as an element/tinted panel, sections */
  --surface-raised: var(--wo-bone);     /* cards, panels (warmest neutral) */
  --surface-inverse: var(--wo-ink);     /* dark sections, footers */
  --surface-inverse-deep: var(--wo-oxblood);

  /* Text */
  --text-primary: var(--wo-ink);        /* headings + body on light */
  --text-secondary: var(--wo-ink-55);   /* captions, supporting copy */
  --text-inverse: var(--wo-paper);      /* text on inverse surfaces */
  --text-inverse-muted: var(--wo-paper-70);

  /* Accent */
  --accent: var(--wo-coral);            /* primary action, emphasis, links */
  --accent-strong: var(--wo-coral-strong); /* hover/active deepening */
  --accent-on: var(--wo-ink);           /* text/icon ON a coral fill */
  --support: var(--wo-moss);            /* secondary accent, success, organic */

  /* Lines & borders */
  --border: var(--wo-ink-15);           /* hairlines, dividers, inputs */
  --border-strong: var(--wo-ink-30);
  --border-inverse: var(--wo-paper-15);

  /* Focus */
  --focus-ring: var(--wo-coral);

  /* Status (warm-mapped, used sparingly) */
  --status-success: var(--wo-moss);
  --status-danger: var(--wo-oxblood);
}


/* ---- tokens/typography.css ---- */
/* ============================================================
   WO! Studio — Typography
   Display/editorial: Fraunces (variable — exploit optical size).
   UI/body: Inter. Restrained weights; Light–Regular for Fraunces.
   ============================================================ */

:root {
  /* ---- Families ------------------------------------------- */
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-serif); /* alias — display headlines */
  --font-body: var(--font-sans);

  /* ---- Variable-font axis presets (Fraunces) -------------- */
  /* Large display wants high opsz + low SOFT/WONK; body serif lower opsz. */
  --fraunces-display: "opsz" 144, "SOFT" 0, "WONK" 0; /* @kind other */
  --fraunces-text: "opsz" 36, "SOFT" 0, "WONK" 0;     /* @kind other */

  /* ---- Weights -------------------------------------------- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---- Type scale (rem; 1rem = 16px) ---------------------- */
  --text-display: 4rem;     /* hero statements — Fraunces light */
  --text-h1: 2.75rem;       /* page titles */
  --text-h2: 2rem;          /* section heads */
  --text-h3: 1.5rem;        /* sub-sections — Inter semibold */
  --text-body-lg: 1.125rem; /* lead paragraphs */
  --text-body: 1rem;        /* default copy */
  --text-small: 0.875rem;   /* captions, meta */
  --text-eyebrow: 0.75rem;  /* eyebrows, labels — tracked, uppercase */

  /* ---- Line heights --------------------------------------- */
  --leading-display: 0.95;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --leading-relaxed: 1.7;

  /* ---- Letter spacing ------------------------------------- */
  --tracking-display: -0.03em; /* large Fraunces tightens */
  --tracking-tight: -0.015em;
  --tracking-normal: 0em;
  --tracking-wide: 0.08em;
  --tracking-eyebrow: 0.22em;  /* uppercase labels */

  /* ---- Measure -------------------------------------------- */
  --measure: 68ch; /* cap body line length */
}


/* ---- tokens/spacing.css ---- */
/* ============================================================
   WO! Studio — Spacing, Radius, Elevation, Layout
   4px base. Use the scale exclusively — no arbitrary gaps.
   Premium read comes from LESS rounding and borders over shadow.
   ============================================================ */

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

  /* ---- Radius — tight & intentional ----------------------- */
  --radius-none: 0px;
  --radius-sm: 4px;   /* default for most surfaces */
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Borders -------------------------------------------- */
  --border-width: 1px;
  --border-hairline: 0.5px; /* editorial rules */

  /* ---- Elevation — soft, low-spread, Ink-tinted (never grey) */
  --shadow-sm: 0 1px 2px rgba(29, 28, 28, 0.06),
               0 1px 1px rgba(29, 28, 28, 0.04);
  --shadow-md: 0 4px 12px rgba(29, 28, 28, 0.08),
               0 2px 4px rgba(29, 28, 28, 0.05);
  --shadow-lg: 0 16px 40px rgba(29, 28, 28, 0.12),
               0 4px 12px rgba(29, 28, 28, 0.06);

  /* ---- Layout --------------------------------------------- */
  --container: 1200px;        /* standard editorial container */
  --container-wide: 1440px;   /* full-bleed editorial moments */
  --grid-columns: 12;         /* @kind other */
  --grid-gutter: 24px;
  --grid-margin: 24px;

  /* ---- Motion lives in tokens/motion.css ------------------ */

  /* ---- Pattern repeat sizes (brand backgrounds) ----------- */
  --chorus-repeat: 160px;     /* The Chorus — standard */
  --signature-repeat: 100px;  /* The Signature — standard */
}


/* ---- tokens/motion.css ---- */
/* ============================================================
   WO! Studio — Motion
   The new core. Treat motion like color: defined once, referenced
   everywhere. These export as CSS vars AND a JS `motion` config
   (see motion.config.js) so scroll code reads the same values.

   Discipline: animate TRANSFORM and OPACITY only. Cinematic comes
   from restraint + a few big payoffs — scene reveals are slow and
   luxurious (slow/cinematic); interactive feedback stays snappy
   (fast/base). Everything degrades under prefers-reduced-motion.
   ============================================================ */

:root {
  /* ---- Duration (triggered / state animation) ------------- */
  --motion-instant: 0ms;      /* @kind other */ /* reduced-motion target */
  --motion-fast: 150ms;       /* @kind other */ /* hover, micro-feedback */
  --motion-base: 300ms;       /* @kind other */ /* most UI state transitions */
  --motion-slow: 600ms;       /* @kind other */ /* section reveals */
  --motion-cinematic: 1100ms; /* @kind other */ /* hero & set-piece reveals */

  /* ---- Easing (the curve carries the feel) ---------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);    /* @kind other */
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);       /* @kind other */
  --ease-cinematic: cubic-bezier(0.83, 0, 0.17, 1); /* @kind other */

  /* ---- Distance / depth ----------------------------------- */
  --rise-sm: 24px;           /* standard reveal offset (translateY) */
  --rise-lg: 48px;           /* heavier reveal offset */
  --parallax-back: 0.85;     /* @kind other */ /* background depth (×scroll) */
  --parallax-fore: 1.15;     /* @kind other */ /* foreground depth (×scroll) */
  --stagger: 100ms;          /* @kind other */ /* delay between staggered children */

  /* ---- Back-compat aliases (existing components) ---------- */
  --dur-fast: var(--motion-fast);   /* @kind other */
  --dur-base: var(--motion-base);   /* @kind other */
  --dur-slow: var(--motion-slow);   /* @kind other */
  --ease-out: var(--ease-entrance); /* @kind other */
  --ease-in-out: var(--ease-standard); /* @kind other */
}

/* ============================================================
   Reveal primitive — the single reusable scroll-reveal.
   Base style IS the visible end-state; we animate FROM hidden,
   gated on [data-reveal] becoming [data-revealed] (set by the
   IntersectionObserver) and on motion being allowed. Print,
   no-JS, and reduced-motion all show the end-state.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  /* Hidden pre-state applies ONLY when JS is active (html.js) so that
     no-JS, print, and failed-script all show the end-state. */
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--rise-sm));
    transition: opacity var(--motion-slow) var(--ease-entrance),
                transform var(--motion-slow) var(--ease-entrance);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: transform, opacity;
  }
  html.js [data-reveal="lg"] { transform: translateY(var(--rise-lg)); }
  html.js [data-revealed] {
    opacity: 1;
    transform: none;
  }
}


/* ---- tokens/patterns.css ---- */
/* ============================================================
   WO! Studio — Brand Pattern Fills
   Two patterns, two voices: The Chorus (full WO! wordmark, loud)
   and The Signature (W! monogram, quiet/architectural).
   Exposed as background-image tokens + ready utility classes.
   RULE: never mix the two on one surface; never stack type on a
   raw pattern — type always sits on a solid plate.
   ============================================================ */

:root {
  /* The Chorus — coral marks on paper */
  --pattern-chorus: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><g fill='%23DE6A6B'><path d='M241.7,608.7c-18.7,0-32.6-24.5-32.6-42.7l-.3-174.8h33.3c21,.2,38.7,17.2,40,38.2.5,9,.3,17.6.1,26.7-.7,37.9-1.3,75.4,0,113.2.4,11.3,4,30,17.2,32.1,5.5.9,11,1.7,17,1.7-14.5-5.8-18.1-21.7-18.1-35.8v-176.7c0,0,35.8.2,35.8.2,19.7,0,37.6,17.2,37.7,37.6l.3,175.1c9.9-5.7,14.8-15.8,16.3-26.8v-186.1s36.2,0,36.2,0c9.6,0,17.5,4.9,24.2,11.6,8.2,9.3,13,21.4,13,34.1v132.2c-.1,16.6-14.2,40.2-32.7,40.2h-187.4Z'/><path d='M781.5,512.9c-7.5,5.7-16.3,9.2-25.8,9.2h-37.4c0,.1,0-131.5,0-131.5h73s0,105.1,0,105.1c-.7,7-4.2,12.6-9.7,17.2Z'/><circle cx='754.8' cy='573.6' r='35.8'/><path d='M669,577c-45.1,43.7-118.8,41.9-161.7-3.7-40.5-43-38.9-109.9,3.6-151,43.4-42,113.8-42.2,157.4-.7,44.5,42.4,45,112.4.7,155.3ZM626.8,499.6c0-19.9-16.1-36-36-36s-36,16.1-36,36,16.1,36,36,36,36-16.1,36-36Z'/></g></svg>") /* @kind other */;
  /* The Chorus — ink marks (for coral/bone grounds) */
  --pattern-chorus-ink: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><g fill='%231D1C1C'><path d='M241.7,608.7c-18.7,0-32.6-24.5-32.6-42.7l-.3-174.8h33.3c21,.2,38.7,17.2,40,38.2.5,9,.3,17.6.1,26.7-.7,37.9-1.3,75.4,0,113.2.4,11.3,4,30,17.2,32.1,5.5.9,11,1.7,17,1.7-14.5-5.8-18.1-21.7-18.1-35.8v-176.7c0,0,35.8.2,35.8.2,19.7,0,37.6,17.2,37.7,37.6l.3,175.1c9.9-5.7,14.8-15.8,16.3-26.8v-186.1s36.2,0,36.2,0c9.6,0,17.5,4.9,24.2,11.6,8.2,9.3,13,21.4,13,34.1v132.2c-.1,16.6-14.2,40.2-32.7,40.2h-187.4Z'/><path d='M781.5,512.9c-7.5,5.7-16.3,9.2-25.8,9.2h-37.4c0,.1,0-131.5,0-131.5h73s0,105.1,0,105.1c-.7,7-4.2,12.6-9.7,17.2Z'/><circle cx='754.8' cy='573.6' r='35.8'/><path d='M669,577c-45.1,43.7-118.8,41.9-161.7-3.7-40.5-43-38.9-109.9,3.6-151,43.4-42,113.8-42.2,157.4-.7,44.5,42.4,45,112.4.7,155.3ZM626.8,499.6c0-19.9-16.1-36-36-36s-36,16.1-36,36,16.1,36,36,36,36-16.1,36-36Z'/></g></svg>") /* @kind other */;
  /* The Signature — coral monograms on paper */
  --pattern-signature: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><g fill='%23DE6A6B'><path d='M361.8,608.9c-18.7,0-32.5-24.4-32.6-42.7l-.3-174.6h33.3c20.9.2,38.7,17.2,39.9,38.2.5,9,.3,17.5.1,26.7-.7,37.8-1.3,75.3,0,113.1.4,11.3,4,30,17.2,32.1,5.5.9,11,1.7,16.9,1.7-14.5-5.8-18.1-21.7-18.1-35.8v-176.5c0,0,35.8.2,35.8.2,19.7,0,37.6,17.2,37.6,37.5l.3,174.9c6.9-4,11.4-10.1,14-17.2s2.3-9.2,2.3-13.9v-181.5s36.2,0,36.2,0c9.6,0,17.5,4.9,24.1,11.6,8.2,9.3,13,21.4,13,34.1v132c-.1,16.6-14.2,40.1-32.7,40.1h-187.2Z'/><path d='M661.3,512.9c-7.5,5.7-16.3,9.2-25.8,9.2h-37.4c0,.1,0-131.4,0-131.4h72.9s0,105,0,105c-.7,7-4.2,12.5-9.7,17.2Z'/><circle cx='634.7' cy='573.5' r='35.7'/></g></svg>") /* @kind other */;
  /* The Signature — ink monograms (for coral/bone grounds) */
  --pattern-signature-ink: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><g fill='%231D1C1C'><path d='M361.8,608.9c-18.7,0-32.5-24.4-32.6-42.7l-.3-174.6h33.3c20.9.2,38.7,17.2,39.9,38.2.5,9,.3,17.5.1,26.7-.7,37.8-1.3,75.3,0,113.1.4,11.3,4,30,17.2,32.1,5.5.9,11,1.7,16.9,1.7-14.5-5.8-18.1-21.7-18.1-35.8v-176.5c0,0,35.8.2,35.8.2,19.7,0,37.6,17.2,37.6,37.5l.3,174.9c6.9-4,11.4-10.1,14-17.2s2.3-9.2,2.3-13.9v-181.5s36.2,0,36.2,0c9.6,0,17.5,4.9,24.1,11.6,8.2,9.3,13,21.4,13,34.1v132c-.1,16.6-14.2,40.1-32.7,40.1h-187.2Z'/><path d='M661.3,512.9c-7.5,5.7-16.3,9.2-25.8,9.2h-37.4c0,.1,0-131.4,0-131.4h72.9s0,105,0,105c-.7,7-4.2,12.5-9.7,17.2Z'/><circle cx='634.7' cy='573.5' r='35.7'/></g></svg>") /* @kind other */;
}

/* ---- Utility classes ------------------------------------- */
.wo-chorus {
  background-color: var(--wo-paper);
  background-image: var(--pattern-chorus);
  background-size: var(--chorus-repeat) var(--chorus-repeat);
  background-repeat: repeat;
}
.wo-chorus--on-ink   { background-color: var(--wo-ink);  background-image: var(--pattern-chorus); }
.wo-chorus--on-coral { background-color: var(--wo-coral); background-image: var(--pattern-chorus-ink); }
.wo-chorus--on-bone  { background-color: var(--wo-bone);  background-image: var(--pattern-chorus-ink); }

.wo-signature {
  background-color: var(--wo-paper);
  background-image: var(--pattern-signature);
  background-size: var(--signature-repeat) var(--signature-repeat);
  background-repeat: repeat;
}
.wo-signature--on-ink   { background-color: var(--wo-ink);   background-image: var(--pattern-signature); }
.wo-signature--on-coral { background-color: var(--wo-coral); background-image: var(--pattern-signature-ink); }
.wo-signature--on-bone  { background-color: var(--wo-bone);  background-image: var(--pattern-signature); }

/* Scale rhythms */
.wo-chorus.is-tight    { background-size: 100px 100px; }
.wo-chorus.is-open     { background-size: 400px 400px; }
.wo-signature.is-dense { background-size: 60px 60px; }
.wo-signature.is-open  { background-size: 180px 180px; }