/* ============================================================
   THE LATTICE — BRAND TOKENS (v3)

   The brand as CSS custom properties. Source of truth:
   ~/Documents/The Lattice/Website/design_handoff_lattice_v3/
   (README.md and "The Lattice - Brand Bible.dc.html").

   Change a colour, a font or a spacing step HERE. css/styles.css
   holds no raw hex — every value in it points back to this file.
   ============================================================ */

:root {

  /* ---- Colour -------------------------------------------------- */

  /* PRIMARY · 45-55% of a page */
  --lattice-ink-navy:        #0B1B3A;

  /* GROUND · 30-40% */
  --lattice-mist-grey:       #F3F4F6;
  --lattice-cool-white:      #FFFFFF;

  /* SECONDARY · 8-12% — light-ground CTAs, links, eyebrows, active states */
  --lattice-cobalt:          #2147E7;
  --lattice-cobalt-hover:    #1A38BE;

  /* SUPPORTING · 3-5% — section markers, on-navy eyebrows, diagram nodes */
  --lattice-iris:            #7A6CFF;

  /* ACTION · 2-4% — CTA fill on NAVY grounds only, with navy text.
     Never on a light ground (1.5:1 vs white fails WCAG 1.4.11 for the
     button's own edge). No decorative use: no dots, underlines, markers.
     Citron appears exactly three times on this page — the header button,
     the hero button, the form submit. A fourth is a brand decision. */
  --lattice-citron:          #C7D84A;
  --lattice-citron-hover:    #D3E35C;

  /* Text */
  --lattice-text-body:       #3C4658;
  --lattice-text-muted:      #5B6478;
  --lattice-text-on-navy:    #FFFFFF;
  --lattice-text-on-navy-2:  #A9B2C6;

  /* Lines. Sections are separated by a 2px navy rule under the heading
     row; columns are divided by 1px hairlines — never by card borders. */
  --lattice-border:          rgba(11, 27, 58, 0.15);
  --lattice-border-strong:   rgba(11, 27, 58, 0.18);
  --lattice-border-on-navy:  rgba(255, 255, 255, 0.18);

  /* Status. The navy variant is required: #B3261E on navy is unreadable. */
  --lattice-error:           #B3261E;
  --lattice-error-on-navy:   #F3B0AB;

  /* Founder portraits. The three headshots come from three photographers
     under very different light, so the muting, contrast and shadow-cooling
     are graded per image and baked into the WebP derivatives — identical
     numbers across all three did not produce a matching result. What stays
     here is the final uniform veil over the finished set, so its strength
     can still be tuned without regenerating anything. Past roughly 0.16 the
     complexions start to go grey. */
  --lattice-portrait-wash:   rgba(11, 27, 58, 0.12);

  /* ---- Type ---------------------------------------------------- */
  /* Two families only. DM Sans was a third in the previous build.
     It is gone — do not reintroduce it. */
  --lattice-font-display:    'Newsreader', Georgia, serif;   /* 500, 600 */
  --lattice-font-ui:         'Inter', system-ui, sans-serif; /* 400, 500, 600 */

  --lattice-size-hero:       clamp(2.6rem, 5.4vw, 4.1rem);
  --lattice-size-section:    clamp(1.9rem, 3.6vw, 2.85rem);
  --lattice-size-statement:  clamp(2rem, 3.9vw, 3rem);   /* navy sections */
  --lattice-size-pull:       clamp(1.6rem, 3.2vw, 2.3rem);
  --lattice-size-column:     1.5rem;
  --lattice-size-body:       1.02rem;
  --lattice-size-body-lg:    1.1rem;
  --lattice-size-ui:         0.9rem;
  --lattice-size-label:      0.72rem;

  --lattice-lh-hero:         1.04;
  --lattice-lh-section:      1.14;
  --lattice-lh-statement:    1.12;
  --lattice-lh-body:         1.6;
  --lattice-lh-body-loose:   1.65;

  --lattice-track-hero:      -0.022em;
  --lattice-track-section:   -0.015em;
  --lattice-track-statement: -0.018em;
  --lattice-track-label:     0.16em;
  --lattice-track-numeral:   0.18em;
  --lattice-track-wordmark:  0.12em;

  /* ---- Space, radius, motion ----------------------------------- */
  --lattice-space-1:  4px;   --lattice-space-2:  8px;
  --lattice-space-3:  12px;  --lattice-space-4:  16px;
  --lattice-space-5:  20px;  --lattice-space-6:  24px;
  --lattice-space-8:  32px;  --lattice-space-10: 40px;
  --lattice-space-14: 56px;  --lattice-space-18: 72px;
  --lattice-space-24: 96px;

  --lattice-section-pad:     clamp(3.5rem, 7vw, 5.5rem);
  --lattice-gutter:          clamp(1.25rem, 5vw, 3rem);
  --lattice-content-max:     1180px;

  /* 5px on controls. Panels and section blocks are square — no radius.
     Cards were removed from this direction deliberately. */
  --lattice-radius-control:  5px;

  --lattice-motion-fast:     0.15s ease;   /* the 1px CTA lift */
  --lattice-motion-base:     0.2s ease;    /* colour */

  /* Sticky header clearance for anchored sections */
  --lattice-header-offset:   96px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}