/* ==========================================================================
   Crawford Legal — Design Tokens
   Single source of truth. No component may hard-code a colour, duration,
   easing or step outside this file.
   ========================================================================== */

:root {
  /* ---------- Colour: neutrals ---------- */
  --c-black:        #0a0908;  /* near black — hero, footer */
  --c-charcoal:     #231f20;  /* SAMPLED from logo wordmark "legal" */
  --c-charcoal-2:   #161314;  /* dark sections between black and charcoal */
  --c-charcoal-3:   #322d2e;  /* raised dark surface */
  --c-concrete:     #6f6a64;  /* mid neutral — dividers on dark */
  --c-stone:        #a8a29b;  /* muted body text on dark — 7.9:1 on black */
  --c-ivory:        #f4f1ec;  /* soft ivory — light sections */
  --c-warm-white:   #fbfaf8;  /* warm white — raised light surface */

  /* ---------- Colour: brand ----------
     --c-orange is SAMPLED from Crawford-Legal_Orange-Colour.png:
     #ff9200 is 72.7% of all opaque logo pixels. It is the brand colour and
     must not be substituted. It is bright and amber-leaning, so it carries
     8.8:1 on near-black but only 2.0:1 on ivory — hence the burnt variants
     below for any orange TEXT on a light background. */
  --c-orange:       #ff9200;  /* primary brand accent — 8.8:1 on --c-black */
  --c-orange-lift:  #ffab4d;  /* hover accent on dark — 10.6:1 on --c-black */
  --c-burnt:        #9c5200;  /* orange text on ivory — 5.2:1 AA */
  --c-burnt-deep:   #7d4200;  /* orange text/focus on light — 7.0:1 AAA */
  --c-amber-glow:   #ffb765;  /* warm light + gradients ONLY — never text */
  --c-orange-deep:   #f07d00; /* CTA gradient mid stop */
  --c-orange-deeper: #d96b00; /* CTA gradient end stop */

  /* ---------- Channels ----------
     Scrims, washes and glows need the brand colours at partial alpha. These
     hold the raw channels so those values derive from the same source as the
     hex tokens above: change the brand orange once and every wash follows.
     Use as: rgb(var(--rgb-orange) / 0.3) */
  --rgb-black:    10 9 8;
  --rgb-charcoal: 35 31 32;
  --rgb-ivory:    244 241 236;
  --rgb-orange:   255 146 0;
  --rgb-burnt:    156 82 0;

  /* ---------- Semantic ---------- */
  /* Section tones. The page must never run two adjacent sections on the same
     ground — --bg-dark-2 was #161314, only a 1.08:1 step from --bg-dark, i.e.
     invisible. It is now the logo's own charcoal: a real 1.22:1 step off black,
     still unmistakably a dark section. */
  --bg-dark:        var(--c-black);
  --bg-dark-2:      var(--c-charcoal);
  --bg-light:       var(--c-ivory);
  --bg-light-2:     var(--c-warm-white);

  --text-on-dark:         var(--c-ivory);      /* 17.7:1 on black */
  --text-on-dark-muted:   var(--c-stone);      /*  7.9:1 on black */
  --text-on-light:        var(--c-charcoal);   /* 14.5:1 on ivory */
  --text-on-light-muted:  #56514b;             /*  7.0:1 on ivory */

  --accent-on-dark:  var(--c-orange);   /* 8.8:1 on black */
  --accent-on-light: var(--c-burnt);    /* 5.2:1 on ivory */

  /* Orange CTA band. Near-black type on brand orange = 8.8:1.
     (White on #ff9200 measures 2.24:1 and is never used.) */
  --bg-cta:        var(--c-orange);
  --text-on-cta:   var(--c-black);
  --text-on-cta-muted: #5c3400;         /* 4.8:1 on --c-orange */

  --rule-on-dark:   rgb(var(--rgb-ivory) / 0.16);
  --rule-on-light:  rgb(var(--rgb-charcoal) / 0.14);
  --rule-on-cta:    rgb(var(--rgb-black) / 0.28);
  --rule-accent:    rgb(var(--rgb-orange) / 0.55);

  --focus-on-dark:  var(--c-orange);
  --focus-on-light: var(--c-burnt-deep);
  --focus-on-cta:   var(--c-black);

  /* ---------- Typography ---------- */
  --font-serif: "Newsreader", "Spectral", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Fluid editorial scale. Clamps keep mobile readable and desktop oversized. */
  --fs-statement: clamp(2.5rem, 1.4rem + 3.6vw, 4.75rem); /* CTA statement */
  --fs-band:    clamp(2rem, 1.1rem + 1.9vw, 2.75rem);     /* band panel heading */
  --fs-display: clamp(3.25rem, 1.6rem + 7.2vw, 8.5rem);   /* hero only */
  --fs-h1:      clamp(2.5rem, 1.5rem + 4.2vw, 5.25rem);
  --fs-h2:      clamp(2rem, 1.35rem + 2.6vw, 3.5rem);
  --fs-h3:      clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  --fs-lead:    clamp(1.0625rem, 0.98rem + 0.42vw, 1.3125rem);
  --fs-body:    clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --fs-small:   0.9375rem;
  --fs-label:   0.75rem;   /* section labels, eyebrow — always uppercase */

  --lh-display: 0.94;
  --lh-tight:   1.06;
  --lh-heading: 1.16;
  --lh-body:    1.62;

  --ls-display: -0.035em;
  --ls-heading: -0.022em;
  --ls-body:    0;
  --ls-label:   0.16em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* Max line length for readable body copy */
  --measure:       64ch;
  --measure-tight: 46ch;

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

  /* Fluid section rhythm. Deliberately generous — roughly +30% over a
     conventional corporate rhythm. Luxury wastes space; corporate fills it. */
  --sp-section:   clamp(6rem, 4rem + 9vw, 13rem);
  --sp-section-y: clamp(4.5rem, 3rem + 5vw, 9rem);

  /* Band rhythm. Every section is roughly one comfortable screen-band tall, so
     the page reads as a sequence of frames rather than a long scroll. */
  --h-hero:       clamp(32rem, 72vh, 46rem);
  --h-band:       clamp(24rem, 52vh, 34rem);
  --h-band-media: clamp(20rem, 46vh, 30rem);

  /* ---------- Layout ---------- */
  --max-w:      88rem;   /* 1408px outer shell */
  --max-w-text: 46rem;
  --gutter:     clamp(1.25rem, 0.7rem + 2.6vw, 4.5rem);
  --header-h:      5.5rem;
  --header-h-slim: 4.25rem;

  /* ---------- Radii ---------- */
  --r-none: 0;
  --r-sm:   2px;
  --r-md:   4px;
  --r-pill: 100px;

  /* ---------- Motion ---------- */
  --d-instant: 120ms;
  --d-fast:    240ms;
  --d-base:    400ms;
  --d-slow:    620ms;
  --d-slower:  800ms;
  --d-hero:    1400ms;

  --e-out:      cubic-bezier(0.22, 1, 0.36, 1);      /* standard reveal */
  --e-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --e-editorial:cubic-bezier(0.16, 1, 0.3, 1);       /* long, confident */
  --e-linear:   linear;

  --stagger: 70ms;

  /* ---------- Elevation ---------- */
  --shadow-lift: 0 18px 50px -18px rgba(0, 0, 0, 0.55);
  --shadow-card: 0 2px 14px -6px rgba(0, 0, 0, 0.28);

  /* ---------- Z-index ----------
     The header sits ABOVE the mobile menu: the menu is full-screen, and the
     toggle that closes it lives in the header. Below the menu and the close
     control is covered by the panel it opened. */
  --z-base:   1;
  --z-raised: 10;
  --z-menu:   100;
  --z-header: 200;
  --z-skip:   300;
}

/* ---------- Breakpoints (documented; media queries use literals) ----------
   sm  →  40rem  / 640px
   md  →  48rem  / 768px
   lg  →  64rem  / 1024px
   xl  →  80rem  / 1280px
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-instant: 1ms; --d-fast: 1ms; --d-base: 1ms;
    --d-slow: 1ms; --d-slower: 1ms; --d-hero: 1ms;
    --stagger: 0ms;
  }
}