/* ============================================================
   R&R Construction / design tokens
   Everything below is the single source of truth for colour,
   type, spacing, motion and layout. Change values here, not
   inside components.
   ============================================================ */

:root {

  /* ---------- Colour (taken from the logo) ---------- */
  --c-black:        #242426;   /* primary black   */
  --c-charcoal:     #303033;   /* charcoal        */
  --c-gold:         #D99A00;   /* warm gold       */
  --c-gold-rich:    #E7A900;   /* rich gold       */
  --c-white:        #FAF9F6;   /* warm white      */
  --c-cream:        #F3F0E9;   /* soft cream      */
  --c-gray:         #E7E3DC;   /* light warm gray */

  /* Derived tone, not from the logo.
     Warm gold on a light background only reaches 2.1:1, which fails
     contrast for text. This darker gold hits 5.3:1 on warm white and
     is used wherever gold needs to carry readable text on light. */
  --c-gold-deep:    #8A5F00;

  /* Ink
     The two "mute" tones carry small labels (11px to 14px), so they are
     tuned to clear 4.5:1 against the *worst* surface they land on, not
     the most common one: --ink-mute against soft cream, and
     --ink-on-dark-mute against charcoal rather than black. */
  --ink:            var(--c-black);
  --ink-soft:       #55555A;   /* 6.4:1 on cream  */
  --ink-mute:       #63636A;   /* 5.3:1 on cream  */
  --ink-on-dark:        #F2F0EB;
  --ink-on-dark-soft:   #B4B2AC;   /* 6.1:1 on charcoal */
  --ink-on-dark-mute:   #A3A099;   /* 5.0:1 on charcoal */

  /* Hairlines */
  --line:           #D9D5CC;
  --line-strong:    #C4BFB4;
  --line-on-dark:   #46464A;
  --line-gold:      var(--c-gold);

  /* Surfaces */
  --bg:             var(--c-white);
  --bg-alt:         var(--c-cream);
  --bg-band:        var(--c-gray);
  --bg-dark:        var(--c-charcoal);
  --bg-darker:      var(--c-black);

  /* ---------- Type ---------- */
  --font-display: "Libre Baskerville", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-display: clamp(2.35rem, 1.15rem + 3.6vw, 4.15rem);
  --fs-h2:      clamp(1.8rem,  1.24rem + 1.9vw, 2.8rem);
  --fs-h3:      clamp(1.3rem,  1.1rem  + 0.85vw, 1.85rem);
  --fs-h4:      clamp(1.05rem, 0.99rem + 0.24vw, 1.2rem);
  --fs-quote:   clamp(1.25rem, 0.98rem + 1.15vw, 2rem);
  --fs-lead:    clamp(1.02rem, 0.97rem + 0.26vw, 1.16rem);
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.82rem;
  --fs-label:   0.7rem;

  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-body:    1.72;
  --lh-tight:   1.45;

  --ls-display: -0.015em;
  --ls-label:   0.16em;
  --ls-wide:    0.09em;

  /* ---------- Spacing (8px base) ---------- */
  --sp-1:  0.5rem;
  --sp-2:  0.75rem;
  --sp-3:  1rem;
  --sp-4:  1.5rem;
  --sp-5:  2rem;
  --sp-6:  2.5rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  5rem;
  --sp-10: 6.5rem;
  --sp-11: 8rem;

  /* ---------- Layout ---------- */
  --page-max:   1420px;
  --gutter:     clamp(1.25rem, 4.2vw, 5rem);
  --measure:    62ch;
  --section-y:  clamp(4.5rem, 3rem + 6vw, 9rem);
  --header-h:   106px;

  /* Width of the margin between the viewport edge and .container's
     content edge, as a grid track.

     The 100% here is deliberate and load-bearing: a custom property is
     substituted at the point of use, so this percentage resolves against
     whatever element finally consumes it. USE IT ONLY in
     `grid-template-columns` on a full-width grid, where 100% is that
     grid's own width. That width excludes the scrollbar, which is what
     makes a full-bleed edge land exactly on the viewport with no
     measuring, no viewport units and no JavaScript. */
  --edge: max(
    var(--gutter),
    calc((100% - var(--page-max)) / 2 + var(--gutter))
  );

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 0.75, 0.24, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   180ms;
  --dur-mid:    380ms;
  --dur-slow:   900ms;

  /* ---------- Focus ---------- */
  --focus-ring: 2px solid var(--c-gold-deep);
  --focus-off:  3px;
}

/* The bar keeps its full height on touch sizes: there is no room to
   condense a stacked lockup and still have it read. */
@media (max-width: 400px) {
  :root { --header-h: 98px; }
}