/* ==========================================================================
   WELL CONNECTED — PROTOTYPE DESIGN TOKENS
   --------------------------------------------------------------------------
   THIS FILE IS THE SWAP LAYER.

   Everything visual (type, color, scale, rhythm, motion) is declared here and
   only here. When Sucre's identity system arrives, replace the values in this
   file. No other stylesheet should hardcode a font, a color or a size.

   Nothing below is a Well Connected design decision. It is deliberately
   neutral scaffolding so the architecture can be judged without an identity.
   ========================================================================== */

:root {

  /* --- TYPEFACES ---------------------------------------------------------
     PROTOTYPE ONLY. One neutral sans + one utility mono for timestamps.
     REPLACE: --font-display / --font-text with Sucre's system.
     ---------------------------------------------------------------------- */
  /* Headlines. Bodoni 72 Oldstyle first — it ships with macOS, so anyone on
     a Mac sees the real thing. Bodoni Moda is the webfont fallback: the same
     didone skeleton, so everyone else gets the intended shapes. */
  --font-display: "Bodoni 72 Oldstyle", "Bodoni 72", "Bodoni Moda", Didot, "Playfair Display", Georgia, serif;
  /* Body copy. Century Gothic first for anyone who has it locally (it ships
     with MS Office); Jost is the webfont fallback — a geometric sans in the
     same family of shapes — so everyone else sees the intended feel.
     Headlines deliberately stay on --font-display. */
  --font-text:    "Century Gothic", Jost, "URW Gothic", "Didact Gothic", Avenir, system-ui, sans-serif;
  --font-utility: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* --- TYPE BEHAVIOUR ---------------------------------------------------- */
  --display-weight: 400;
  --display-tracking: 0.005em;
  --display-leading: 0.98;
  --display-transform: uppercase;

  --text-weight: 400;
  --text-leading: 1.5;

  /* The utility face now serves information only: timestamps, asset labels
     and sourcing notes. It no longer sets decorative micro-type, so it is not
     uppercased and not tracked. */
  --utility-size: 0.8125rem;
  --utility-tracking: 0.01em;
  --utility-transform: none;

  /* --- TYPE SCALE (fluid) ------------------------------------------------ */
  /* Reduced 27 Aug: at 8.2vw the headline plus its copy filled 74% of the
     viewport with no air left in the frame. */
  --t-hero:    clamp(2.5rem, 6.9vw, 7rem);
  --t-section: clamp(2.1rem, 5.6vw, 5.5rem);
  --t-sub:     clamp(1.25rem, 2.1vw, 1.75rem);
  /* Between section and sub. For a line that has to land but must not
     compete with a headline. */
  --t-statement: clamp(1.3rem, 2.4vw, 2.125rem);
  /* A closing line that has to land without becoming a second headline:
     larger than a statement, well short of the claim above it. */
  --t-close:     clamp(1.5rem, 2.9vw, 2.5rem);
  /* Larger than the hero line. Used once, for the one section that has no
     image and has to carry the page on type alone. */
  --t-claim:     clamp(2.4rem, 6.4vw, 6.5rem);
  --t-lead:    clamp(1.0625rem, 1.45vw, 1.375rem);
  --t-body:    clamp(1rem, 1.15vw, 1.125rem);
  --t-small:   0.875rem;

  /* --- COLOR -------------------------------------------------------------
     Neutral greyscale. No gold, no cream, no gradient. Two surfaces only:
     one dark, one light. REPLACE with Sucre's palette.
     ---------------------------------------------------------------------- */
  --ink:        #111111;
  --ink-muted:  #5c5c5c;
  --paper:      #ffffff;
  --paper-soft: #f1f1f0;

  --dark:        #0c0c0c;
  --dark-raised: #161616;
  --on-dark:        #f4f4f4;
  --on-dark-muted:  #9a9a9a;

  --rule-light: rgba(17, 17, 17, 0.14);
  --rule-dark:  rgba(244, 244, 244, 0.18);

  /* Accent is intentionally not a color in the prototype. It is contrast.
     REPLACE: --accent once the identity defines one. */
  --accent: currentColor;

  /* --- SPACE / RHYTHM ---------------------------------------------------- */
  --gutter: clamp(1.25rem, 4.5vw, 5rem);
  --measure: 34rem;              /* max line length for body copy */
  --section-pad-y: clamp(3.5rem, 7vh, 6.5rem);
  --stack-sm: 0.75rem;
  --stack-md: 1.5rem;
  --stack-lg: clamp(2rem, 4vw, 3.5rem);
  --stack-xl: clamp(2.25rem, 4.5vw, 4rem);
  --max-width: 1680px;

  /* --- SHAPE -------------------------------------------------------------
     Near-zero radius by default. No large rounded rectangles.
     ---------------------------------------------------------------------- */
  --radius: 0px;
  --hairline: 1px;

  /* --- MOTION ------------------------------------------------------------ */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 220ms;
  --dur: 620ms;
  --dur-slow: 1100ms;
  --reveal-shift: 18px;

  /* --- MEDIA GRADE -------------------------------------------------------
     The Death to Stock photography is art directed and carries its own
     colour. Nothing is applied to it.

     --legacy-grade is scoped to the leftover Motion Array clips only. Those
     are gold-lit stock and read as nightlife ungraded. Every element carrying
     it is a placeholder. When the last legacy clip is replaced, this token
     and the .media--legacy class go with it.
     ---------------------------------------------------------------------- */
  --media-grade: none;
  --legacy-grade: saturate(0.22) contrast(1.06) brightness(0.92);
}