/* ============================================================
 * Trophy design tokens — shared primitives.
 *
 * Trophy's universal convention: 10px-root-rem system.
 * `html { font-size: 62.5% }` is set in reset.css, making 1rem = 10px.
 * Type, space, and layout values below all use `rem`.
 *
 * SHAPE is shared; VALUES are mostly overridable per site.
 * Only --trophy-yellow is universal (the brand mark).
 * Every other token has a NEUTRAL DEFAULT — each site overrides
 * in its own style.css `:root {}` block to express its building
 * palette/type/scale.
 *
 * Reference implementation: 119 W 57 (heritage boutique).
 * See clients/projects/delivered/119-west-57th-street/design-system.md
 * for one example of how a site fills these slots.
 * ============================================================ */

:root {
  /* ---------- BRAND (universal) ---------- */

  /* Trophy yellow — universal brand mark. Do not override. */
  --trophy-yellow: #fab300;

  /* ---------- SITE PALETTE SLOTS (override per site) ---------- */
  /* The slot names below are the contract every Trophy site fills in.
   * Defaults are neutral parchment/ink so a placeholder site still
   * renders coherently. A real site re-declares these in style.css. */

  /* Light grounds — base section + secondary section + frame mat */
  --bg-base: #f6f3ec;       /* page + light-section background */
  --bg-2:    #ece6d8;       /* alternate light section / frame mat */

  /* Dark grounds — primary dark + secondary dark + frame mat-on-dark */
  --bg-dark:   #14110d;     /* hero / dark sections */
  --bg-dark-2: #211c14;     /* dark frame mat */

  /* Ink — primary body text + secondary muted */
  --ink:      #221a13;
  --ink-soft: #3a342b;

  /* Accent — primary (on light) + bright (on dark / hover) + muted */
  --accent:        #9a6d2e; /* hairlines + borders on light grounds */
  --accent-bright: #b88638; /* hover state universally + on-dark borders */
  --accent-muted:  #74542a; /* quiet meta */

  /* Page ground — override to match site bg when sections need to blend into something */
  --page-bg: var(--bg-base);

  /* ---------- TYPOGRAPHY (families override per site) ---------- */

  /* Site-overridable family slots. Defaults pick system fallbacks so an
   * unstyled placeholder still has working type. Real sites swap these
   * in style.css after loading their webfonts. */
  --font-display: Georgia, 'Times New Roman', serif;
  --font-deco:    Georgia, serif;
  --font-sans:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'Courier New', monospace;

  /* Display type scale — fluid clamps, calibrated against 119 W 57.
   * In 10px-rem: 1rem = 10px, so 38px = 3.8rem, etc.
   * Override the individual sizes if a site needs a tighter or looser
   * tier ladder; do not invent a 6th tier without flagging a global change. */
  --type-hero:    clamp(3.8rem, 4.2vw, 5.4rem); /* hero headline */
  --type-h1:      clamp(3.6rem, 4.4vw, 5.8rem); /* section title */
  --type-h2:      clamp(2.8rem, 3.3vw, 4.4rem); /* feature title */
  --type-h3:      clamp(2.2rem, 2.4vw, 3.2rem); /* sub-section */
  --type-body:    1.7rem;                       /* body / lede */
  --type-body-sm: 1.5rem;                       /* secondary body */
  --type-meta:    1.1rem;                       /* mono caps meta */
  --type-eyebrow: 1.05rem;                      /* mono caps small label */

  /* Letter-spacing (display vs caps) */
  --ls-display:  -0.02em;
  --ls-caps:     0.24em;

  /* Line-height */
  --lh-tight:    1.05;
  --lh-snug:     1.25;
  --lh-body:     1.6;
  --lh-loose:    1.7;

  /* ---------- SPACE SCALE ---------- */
  /* Eight-step ladder in 10px-rem. Trophy sections typically pad 140–160px
   * top/bottom on desktop; --space-section is the canonical section padding. */
  --space-1:  0.4rem;
  --space-2:  0.8rem;
  --space-3:  1.2rem;
  --space-4:  1.6rem;
  --space-5:  2.4rem;
  --space-6:  3.2rem;
  --space-7:  4.8rem;
  --space-8:  6.4rem;
  --space-9:  9.6rem;
  --space-10: 12.8rem;
  --space-section: 14rem;          /* canonical desktop section top padding */
  --space-section-mobile: 9.6rem;

  /* ---------- LAYOUT ---------- */
  --nav-height:    7.2rem;
  --container-max: 128rem;
  --container-pad: 5.6rem;

  /* ---------- BORDERS / RADIUS / SHADOW ---------- */
  /* Trophy sites tend to use square corners + hairline borders.
   * Radius defaults to 0; override only if a site brief calls for soft corners.
   * Hairlines stay in `px` because 1px is a device-pixel concept, not a
   * type-scaling concept. */
  --radius-sm:  0;
  --radius-md:  0;
  --radius-pill: 999px;

  --border-hairline: 1px solid var(--accent);
  --border-on-dark:  1px solid var(--accent-bright);

  /* Shadows are kept minimal — Trophy sites prefer hairlines + brackets
   * to drop-shadow. The shadow tokens exist for hover affordances on
   * sites that want them. */
  --shadow-sm:  0 0.1rem 0.2rem rgba(0, 0, 0, 0.06);
  --shadow-text-on-image: 0 0.2rem 1.4rem rgba(0, 0, 0, 0.38), 0 0.1rem 0.2rem rgba(0, 0, 0, 0.22);

  /* ---------- MOTION ---------- */
  /* Three easing curves cover Trophy motion vocabulary:
   * --ease            : default, hovers and small transitions
   * --ease-slow       : hero video, long parallax
   * --ease-editorial  : reveals, nav slide-in/out, menu overlay
   * Names match the 119 W 57 prototype's --easing / --easing-slow / --easing-editorial. */
  --ease:            cubic-bezier(0.22, 1, 0.36, 1);
  --ease-slow:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-editorial:  cubic-bezier(0.19, 1, 0.22, 1);

  --duration-fast:   0.3s;
  --duration:        0.5s;
  --duration-slow:   1.2s;
  --duration-reveal: 1.4s;
  --duration-spin:   2.2s;

  /* ---------- Z-INDEX SCALE ---------- */
  --z-base:    1;
  --z-overlay: 10;
  --z-nav:     100;
  --z-menu:    200;
  --z-loader:  9999;
}