/* ==========================================================================
   INSTRUMENT GRADE — DESIGN TOKENS
   Single source of truth. No selectors below :root. Nothing here paints.
   ========================================================================== */

:root {

  /* --- Core palette ------------------------------------------------------
     Five tokens, locked in Phase 2. Every colour on the site resolves to one
     of these or a documented alpha/tint derived from one of them.
     Hex values assigned here for the first time — see INSTALL.md §2 if you
     want to adjust before the build is finalised.
  ----------------------------------------------------------------------- */

  --gt-abyssal:  #08131A;  /* primary ground. deep, desaturated, blue-black  */
  --gt-bone:     #E9E5DB;  /* primary light surface + text on abyssal       */
  --gt-graphite: #4A555C;  /* structural mid-tone. rules, meta, secondary   */
  --gt-solar:    #E8A33D;  /* the single accent. used with restraint        */
  --gt-glacial:  #7FB3C8;  /* data + measurement. never decorative          */

  /* --- Derived surfaces -------------------------------------------------- */

  --gt-abyssal-raised: #0E1D26;  /* cards on abyssal ground                  */
  --gt-abyssal-sunk:   #050D12;  /* the Telemetry Band, footer               */
  --gt-bone-raised:    #F2EFE8;  /* cards on bone ground                     */
  --gt-bone-sunk:      #DDD8CB;  /* wells, inset panels on bone              */

  /* --- Alpha derivations -------------------------------------------------
     Rules and dividers are always alpha, never a solid tint, so they read
     correctly against both grounds without a second token.
  ----------------------------------------------------------------------- */

  --gt-rule-on-dark:   rgba(233, 229, 219, 0.14);
  --gt-rule-on-light:  rgba(8, 19, 26, 0.14);
  --gt-rule-strong:    rgba(233, 229, 219, 0.30);
  --gt-solar-wash:     rgba(232, 163, 61, 0.12);
  --gt-glacial-wash:   rgba(127, 179, 200, 0.12);

  /* --- Semantic assignments ---------------------------------------------
     Components reference these, not the raw palette. Flipping a section
     between grounds is then a matter of reassigning four variables.
  ----------------------------------------------------------------------- */

  --gt-ground:      var(--gt-abyssal);
  --gt-ink:         var(--gt-bone);
  --gt-ink-muted:   rgba(233, 229, 219, 0.62);
  --gt-ink-faint:   rgba(233, 229, 219, 0.38);
  --gt-rule:        var(--gt-rule-on-dark);
  --gt-accent:      var(--gt-solar);
  --gt-data:        var(--gt-glacial);

  /* --- Typefaces ---------------------------------------------------------
     Archivo is loaded as a variable font so the Expanded width is a live
     axis (wdth 125) rather than a separate static family. This matters:
     it keeps the display face on one file and lets headlines hold their
     width at every size without a fallback jump.
  ----------------------------------------------------------------------- */

  --gt-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --gt-font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --gt-font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gt-display-width: 125;   /* wdth axis value for Archivo Expanded */

  /* --- Type scale --------------------------------------------------------
     Fluid, clamped. Ratio ~1.32 at the display end, tighter through body
     sizes so technical copy stays dense and legible.
  ----------------------------------------------------------------------- */

  --gt-text-2xs: 0.6875rem;                              /* 11px — tick labels   */
  --gt-text-xs:  0.75rem;                                /* 12px — mono eyebrows */
  --gt-text-sm:  0.8125rem;                              /* 13px — meta, captions*/
  --gt-text-base: 1.0625rem;                             /* 17px — body          */
  --gt-text-lg:  clamp(1.1875rem, 0.4vw + 1.1rem, 1.375rem);
  --gt-text-xl:  clamp(1.5rem, 1vw + 1.25rem, 1.9375rem);
  --gt-text-2xl: clamp(1.875rem, 2vw + 1.375rem, 2.75rem);
  --gt-text-3xl: clamp(2.375rem, 3.4vw + 1.5rem, 4rem);
  --gt-text-4xl: clamp(2.875rem, 5.2vw + 1.375rem, 5.5rem);

  --gt-leading-tight:  1.04;
  --gt-leading-snug:   1.22;
  --gt-leading-normal: 1.58;
  --gt-leading-loose:  1.72;

  --gt-tracking-display: -0.022em;
  --gt-tracking-body:     0;
  --gt-tracking-mono:     0.10em;
  --gt-tracking-eyebrow:  0.16em;

  /* --- Spacing -----------------------------------------------------------
     4px base. Section rhythm is deliberately large; instrument panels earn
     their authority from air around dense clusters, not from uniform padding.
  ----------------------------------------------------------------------- */

  --gt-s1:  0.25rem;
  --gt-s2:  0.5rem;
  --gt-s3:  0.75rem;
  --gt-s4:  1rem;
  --gt-s5:  1.5rem;
  --gt-s6:  2rem;
  --gt-s7:  3rem;
  --gt-s8:  4rem;
  --gt-s9:  6rem;
  --gt-s10: 8rem;

  --gt-section-y: clamp(4rem, 8vw, 8.5rem);
  --gt-gutter:    clamp(1.25rem, 4vw, 3rem);

  /* --- Measure and containers -------------------------------------------- */

  --gt-container:  1280px;
  --gt-container-narrow: 780px;
  --gt-measure:    68ch;
  --gt-measure-tight: 54ch;

  /* --- Geometry ----------------------------------------------------------
     Near-zero radius. Instruments have machined edges, not soft ones — but
     2px reads as milled rather than as a deliberate hard-edge statement.
  ----------------------------------------------------------------------- */

  --gt-radius:      2px;
  --gt-radius-none: 0;
  --gt-hairline:    1px;

  /* --- Bracket marks -----------------------------------------------------
     The recurring structural device: viewfinder / registration corners.
     Used instead of borders to frame anything that is "under measurement".
  ----------------------------------------------------------------------- */

  --gt-bracket-len:  14px;
  --gt-bracket-wt:   1px;

  /* --- Motion ------------------------------------------------------------ */

  --gt-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --gt-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --gt-dur-fast:    140ms;
  --gt-dur:         260ms;
  --gt-dur-slow:    620ms;

  /* --- Depth -------------------------------------------------------------
     No soft drop shadows anywhere. Elevation is communicated by ground
     shift and bracket marks. This ring is the only shadow token, reserved
     for focus.
  ----------------------------------------------------------------------- */

  --gt-focus-ring: 0 0 0 2px var(--gt-ground), 0 0 0 4px var(--gt-solar);

  /* --- Z-index ------------------------------------------------------------ */

  --gt-z-band:   80;
  --gt-z-header: 70;
  --gt-z-menu:   90;
}

/* --- Ground inversion -----------------------------------------------------
   Any section can be flipped to the bone ground by adding .gt-ground-bone.
   Every component downstream reads the semantic tokens, so nothing else
   needs to change.
-------------------------------------------------------------------------- */

.gt-ground-bone {
  --gt-ground:    var(--gt-bone);
  --gt-ink:       var(--gt-abyssal);
  --gt-ink-muted: rgba(8, 19, 26, 0.68);
  --gt-ink-faint: rgba(8, 19, 26, 0.42);
  --gt-rule:      var(--gt-rule-on-light);
  --gt-data:      #34697E;  /* glacial shifted darker to hold contrast on bone */
}

.gt-ground-abyssal {
  --gt-ground:    var(--gt-abyssal);
  --gt-ink:       var(--gt-bone);
  --gt-ink-muted: rgba(233, 229, 219, 0.62);
  --gt-ink-faint: rgba(233, 229, 219, 0.38);
  --gt-rule:      var(--gt-rule-on-dark);
  --gt-data:      var(--gt-glacial);
}