/* ============================================================
   THE SEAGATE — DESIGN TOKENS
   ------------------------------------------------------------
   Direction: "Lower Bight" — editorial coastal minimalism.
   Paper-white grounds, deep petrol ink, photography that is
   framed rather than bled, and one accent used sparingly.
   Structure is carried by rules, numerals and space — not by
   boxes, shadows or gradients.

   Every value the site uses lives here. No component invents
   a colour, a radius, a duration or a step of the type scale.
   ============================================================ */

:root {
  /* ── GROUND ───────────────────────────────────────────────
     Three papers, cool rather than warm, so the photography
     (which is all turquoise and sand) is the only warm thing
     on the page. */
  --shell:        #F7F6F3;   /* the page */
  --shell-2:      #EFEDE7;   /* a band that separates two ideas */
  --shell-3:      #E4E1D8;   /* a plate behind media, and rules on light */

  /* ── INK ──────────────────────────────────────────────────
     Near-black with a blue cast. No pure black, no grey mush.
     Every value below is measured against BOTH papers, because a
     token that only passes on the lighter of the two grounds fails
     the moment a section is given a band. */
  --ink:          #14181B;   /* headings, primary body — 16.5:1 on --shell */
  --ink-2:        #4A5257;   /* secondary body — 7.4:1 */
  --ink-3:        #5F676C;   /* meta, captions — 5.3:1 on --shell, 4.9:1 on --shell-2 */

  /* ── DEEP ─────────────────────────────────────────────────
     The single accent, and the dark ground. A petrol green
     read off the shallows in the property's own drone frames. */
  --deep:         #113330;   /* dark sections, primary button */
  --deep-2:       #0A2320;   /* the deepest ground — footer */
  --deep-3:       #1E4A45;   /* hover state of the primary action */
  --foam:         #C3D6D1;   /* body copy on --deep — 9.9:1 */
  --foam-2:       #8FA8A3;   /* meta on --deep — 5.4:1 */

  /* ── BRASS ────────────────────────────────────────────────
     The one warm note in the interface, and it never fills
     anything larger than a hairline or a two-digit number.
     It exists in TWO values on purpose: the lighter one is the
     colour of a rule and cannot be read at 11px, the darker one
     is what the numerals are actually set in. */
  --brass:        #A8875C;   /* RULES AND MARKS ONLY — 3.1:1, it is not a text colour */
  --brass-ink:    #806536;   /* the same note where it has to be read — 5.1:1 */
  --brass-soft:   #C6A97F;   /* both of the above, on a dark ground — 6.1:1 on --deep */

  /* ── LINES ────────────────────────────────────────────────
     Visible at arm's length. A grid you cannot see is a grid
     the page gets no credit for. */
  --line:         rgba(20, 24, 27, .14);
  --line-2:       rgba(20, 24, 27, .28);
  --line-dark:    rgba(255, 255, 255, .16);
  --line-dark-2:  rgba(255, 255, 255, .30);

  /* ── STATUS (functional only, never decorative) ─────────── */
  --note:         #80632F;   /* "currently renovating" and similar — 5.2:1 */

  /* ── TYPE ─────────────────────────────────────────────────
     Two faces. A high-contrast display serif for anything that
     is meant to be looked at, and one grotesque for everything
     that is meant to be read or used. There is no third face:
     numerals sit in the serif, where they belong. */
  --display: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* display scale — fluid, five steps, nothing between them */
  /* The hero heading is deliberately NOT the biggest number this
     scale could carry. It lives in a 47%-wide column beside the
     photograph, and a display size chosen for a full-bleed hero
     pushes the lede and the two actions below the fold on a
     900-tall laptop — which is where the only CTA that matters is. */
  --d-1: clamp(2.45rem, 1.55rem + 3.3vw, 4.6rem);  /* the hero */
  --d-2: clamp(2rem, 1.45rem + 2.5vw, 3.75rem);    /* a section opens */
  --d-3: clamp(1.7rem, 1.4rem + 1.5vw, 2.6rem);    /* a sub-chapter */
  --d-4: clamp(1.3rem, 1.18rem + 0.7vw, 1.75rem);  /* a card, a residence name */

  /* text scale */
  --t-lede: clamp(1.05rem, 1rem + .36vw, 1.3rem);
  --t-body: 1.0625rem;
  --t-sm:   .9375rem;
  --t-xs:   .8125rem;
  --t-eyebrow: .6875rem;

  /* ── TRACKING AND LEADING ARE SIZE-SPECIFIC ────────────────
     There used to be one --ls-display (-.015em) and one
     --lh-display (1.06) for every heading on the site, and the
     display scale runs from 74px down to 21px. One value across
     that range is wrong at both ends: at 74px the letters still
     read too loose, and at 21px the same negative tracking starts
     closing the counters up.

     So each step carries its own pair. Tracking tightens as the
     type grows; leading loosens as it shrinks — the two move in
     opposite directions, which is what keeps a 74px headline and
     a 21px residence name looking like the same typeface doing
     its job rather than one setting stretched over four sizes. */
  --ls-d1: -.028em;  --lh-d1: 1.02;
  --ls-d2: -.022em;  --lh-d2: 1.06;
  --ls-d3: -.017em;  --lh-d3: 1.12;
  --ls-d4: -.011em;  --lh-d4: 1.18;

  /* Body sits at the face's own tracking — a grotesque at reading
     size is already spaced correctly and anything applied here is
     a thumb on the scale. Small uppercase labels are the one place
     that genuinely wants positive tracking. */
  --ls-body: 0;
  --ls-eyebrow: .16em;

  --lh-lede: 1.5;
  --lh-body: 1.65;

  /* ── SPACE — 8pt. Seven steps, and every one of them is used;
     a scale carries no rungs nothing stands on. ─────────────── */
  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;    --s5: 1.5rem;
  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;

  --sec:    clamp(4.5rem, 3rem + 7vw, 9rem);     /* the standard chapter */
  --sec-lg: clamp(6rem, 4rem + 9vw, 12rem);      /* a chapter that arrives */
  --gap-head: clamp(2rem, 1.4rem + 2.4vw, 3.75rem);

  --page: 1320px;
  --measure: 34rem;                               /* readable line length */
  --gutter: clamp(1.25rem, .6rem + 3.2vw, 4.5rem);

  /* ── SHAPE ────────────────────────────────────────────────
     Photography and panels are square. The only round things
     on the site are the actions — which is what makes them
     read as actions. */
  --r-sm: 3px;    /* the focus ring, and inputs — nothing else */
  --pill: 999px;  /* actions only */

  /* ── MOTION ───────────────────────────────────────────────
     Two curves, four durations. Interface answers fast, content
     becomes present slowly, media slowest of all — and a press
     answers faster than anything else on the site.

     --t-press exists because feedback on a press has to arrive
     while the finger is still down. Run it on the same 280ms
     curve as a hover and the button appears to acknowledge the
     click after the click, which reads as lag rather than as a
     button. Everything animated here is transform or opacity. */
  --ease: cubic-bezier(.22, .61, .21, .99);   /* content arriving */
  --ease-ui: cubic-bezier(.32, .72, 0, 1);    /* the interface answering */
  --t-press: .1s;
  --t-ui: .26s;
  --t-in: .7s;
  --t-media: 1.15s;
  --stagger: 70ms;

  /* the control height every button, chip and input measures to,
     so a row of actions lines up without anyone counting padding */
  --ctl-h: 2.875rem;


  /* the sticky header's height, so every scroll target can
     clear it with one token instead of six guesses */
  --header-h: 72px;
}

@media (min-width: 900px) {
  :root { --header-h: 84px; }
}

/* Honour the system preference, but never let a reduced-motion
   user lose content: reveals resolve to their final state. The
   press feedback is kept — it is a colour/scale change on a
   deliberate action, not vestibular motion, and removing it would
   leave the one control on the page that gives no answer. */
@media (prefers-reduced-motion: reduce) {
  :root { --t-in: .001s; --t-media: .001s; --t-ui: .001s; --stagger: 0ms; }
}