/* ============================================================
   TrueBalance — design tokens
   Light and airy. Palette taken from the brand mark: white
   ground, near-black type, and a silver ramp (#707070 →
   #f0f0f0) used as hairline and edge light. Silver is a
   material, never a costume.
   ============================================================ */

:root {
  /* --- ground --------------------------------------------- */
  --paper:          #FBFAF8;
  --paper-warm:     #F5F2ED;   /* faint tonal band            */
  --paper-sunk:     #EFEBE4;   /* recessed panels             */
  --ink:            #14120F;   /* the brand black             */

  /* --- silver ramp (from the mark) ------------------------ */
  --ag-100:         #f0f0f0;
  --ag-200:         #e0e0e0;
  --ag-300:         #d0d0d0;
  --ag-400:         #c0c0c0;
  --ag-500:         #b0b0b0;   /* the mark's mid-tone         */
  --ag-600:         #909090;
  --ag-700:         #707070;
  --ag-800:         #58585c;

  /* --- text ------------------------------------------------ */
  --tx-hi:          #14120F;
  --tx:             #443F38;   /* body copy — 17px minimum    */
  --tx-lo:          #6E675D;
  --tx-faint:       #9C9487;
  --tx-inv:         #ffffff;

  /* --- structure ------------------------------------------ */
  --line:           rgba(20,18,15,.11);
  --line-strong:    rgba(20,18,15,.19);
  --line-bright:    rgba(20,18,15,.40);
  /* 1px inset top-highlight — the machined edge, on light */
  --edge-light:     inset 0 1px 0 rgba(255,255,255,.9);
  --lift:           0 1px 2px rgba(20,18,15,.04),
                    0 8px 24px -12px rgba(20,18,15,.10);
  --lift-2:         0 2px 6px rgba(20,18,15,.05),
                    0 18px 44px -20px rgba(20,18,15,.16);
  --lift-3:         0 4px 12px rgba(20,18,15,.06),
                    0 40px 80px -32px rgba(20,18,15,.24);
  /* warm dark surface — hers uses #535353 for testimonials. We had
     nothing between stark ink and white paper. */
  --ink-warm:       #2E2A25;

  /* Specular sweep for the signature light-rake. Silver
     catching light reads more naturally on white than on
     black. Never applied to headline text. */
  --rake: linear-gradient(100deg,
            transparent 0%,
            rgba(255,255,255,0) 34%,
            rgba(255,255,255,.85) 48%,
            rgba(255,255,255,1) 50%,
            rgba(255,255,255,.85) 52%,
            rgba(255,255,255,0) 66%,
            transparent 100%);

  /* --- type ----------------------------------------------- */
  /* Archivo variable — width AND weight axes. The width axis is
     what keeps it from reading as another default grotesque:
     display type runs slightly narrow and tight, body runs
     normal. Never Inter. */
  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
  --font-text:    "Archivo", -apple-system, BlinkMacSystemFont, Helvetica, sans-serif;
  /* mono is for REAL data only — never enumeration */
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* width settings, applied via font-variation-settings */
  --wd-display:   102;   /* was 92 — condensed read severe    */
  --wd-text:      100;

  --fs-display:   clamp(2.75rem, 6.4vw, 5.75rem);
  --fs-h1:        clamp(2.25rem, 4.6vw, 3.75rem);
  --fs-h2:        clamp(1.75rem, 3.0vw, 2.625rem);
  --fs-h3:        clamp(1.25rem, 1.7vw, 1.5rem);
  --fs-body:      1.0625rem;   /* 17px — readability floor    */
  --fs-lead:      1.1875rem;
  --fs-sm:        0.9375rem;
  --fs-xs:        0.8125rem;

  --lh-display:   1.12;
  --lh-head:      1.18;
  --lh-body:      1.68;        /* airier on light             */

  --tr-display:   -0.018em;
  --tr-head:      -0.012em;
  --tr-body:      -0.004em;

  /* --- space — generous, this is the "airy" lever ---------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8.5rem; --sp-11: 12rem;

  --measure:      66ch;
  --gutter:       clamp(1.25rem, 4vw, 3.5rem);
  --maxw:         1280px;
  --maxw-narrow:  760px;

  /* --- form ----------------------------------------------- */
  --r-sm: 10px; --r: 14px; --r-lg: 20px;  /* hers is 20 — round reads warm */
  --r-xl: 28px;

  /* --- motion --------------------------------------------- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --t-fast:    180ms;
  --t:         320ms;
  --t-slow:    720ms;

  --z-nav: 100;  --z-modal: 400;
}

/* Inverted band — used sparingly for a single contrast moment
   (a closing CTA or a quote), never for whole pages. */
[data-surface="ink"] {
  --paper: #0c0c0d;
  --paper-warm: #121214;
  --paper-sunk: #16161a;
  --tx-hi: #f7f7f8;
  --tx: #c8c8cc;
  --tx-lo: #8e8e94;
  --tx-faint: #5c5c62;
  --tx-inv: #0c0c0d;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);
  --line-bright: rgba(255,255,255,.34);
  --edge-light: inset 0 1px 0 rgba(255,255,255,.07);
  --lift: none;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t: 1ms; --t-slow: 1ms; }
}