/* ============================================================
   Cotswold Capital — Tokens (Concept III)
   Single sans voice. Restraint as the design.
   ============================================================ */

:root {
  /* ============================================================
     CLIENT PALETTE ONLY — white #FFFFFF, navy #1C252E (the "blue"),
     rose gold #CCB3A4 (logo + sparing accent). Secondary text and
     lines are navy at reduced opacity; no other hues are used.
     ============================================================ */

  /* ---- Surface ---- */
  --surface:        #FFFFFF;
  --surface-2:      rgba(28,37,46,0.03); /* faint navy wash over white */
  --surface-3:      rgba(28,37,46,0.06);

  /* ---- Ink ---- */
  --ink:            #1C252E;            /* navy — primary text */
  --ink-2:          rgba(28,37,46,0.72);
  --ink-3:          rgba(28,37,46,0.55);
  --ink-inv:        #FFFFFF;

  /* ---- Lines ---- */
  --rule:           rgba(28,37,46,0.12);
  --rule-strong:    rgba(28,37,46,0.24);

  /* ---- Accents (used sparingly) ---- */
  --rose:           #CCB3A4;            /* rose gold */
  --blue:           #1C252E;            /* navy is the only blue */

  /* ---- Type ---- */
  --font-display:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-body:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --t-display:      clamp(3rem, 6.5vw, 6rem);
  --t-h1:           clamp(2.25rem, 3.5vw, 3.5rem);
  --t-h2:           clamp(1.375rem, 1.4vw + 0.75rem, 1.75rem);
  --t-h3:           1.25rem;
  --t-body:         1.0625rem;
  --t-small:        0.9375rem;
  --t-meta:         0.8125rem;

  --lh-tight:       1.04;
  --lh-snug:        1.18;
  --lh-normal:      1.55;

  --ls-display:     -0.022em;
  --ls-tight:       -0.012em;
  --ls-normal:      0;
  --ls-eyebrow:     0.18em;

  /* ---- Space (4px base) ---- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* ---- Layout ---- */
  --max-w:          1320px;
  --gutter:         clamp(20px, 4vw, 56px);
  --grid-gap:       clamp(16px, 2vw, 32px);

  /* ---- Motion ---- */
  --ease-out:       cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:      cubic-bezier(0.4, 0, 0.2, 1);
  --d-instant:      120ms;
  --d-quick:        180ms;
  --d-base:         240ms;
  --d-soft:         320ms;
  --d-image:        800ms;

  /* ---- Radii (subtle, institutional) ---- */
  --r-1:            2px;
  --r-2:            6px;

  /* ---- Shadows (whisper only) ---- */
  --shadow-1:       0 1px 2px rgba(28,37,46,0.04),
                    0 2px 8px rgba(28,37,46,0.04);
  --shadow-2:       0 8px 30px rgba(28,37,46,0.10),
                    0 2px 6px rgba(28,37,46,0.06);

  /* ---- Cursor ---- */
  --cursor-dot:     6px;
  --cursor-ring:    34px;

  /* ---- Dark surface (navy) ---- */
  --ink-dark:       #1C252E;            /* navy */
  --ink-dark-2:     #283039;            /* lighter navy, same hue, for layering */
  --on-dark:        #FFFFFF;
  --on-dark-2:      rgba(255,255,255,0.74);
  --on-dark-3:      rgba(255,255,255,0.52);
  --rule-dark:      rgba(255,255,255,0.16);
}