/* ---------------------------------------------------------------------------
   Devnox Advisory — design tokens.
   The single source of truth for colour, type and layout rhythm. Nothing in
   here is a rule; it is all custom properties so components can only ever
   reference the system, never re-derive it.

   Layout tokens are redefined inside the breakpoints at the bottom. That is
   the mechanism the whole responsive layer leans on: sections and grids read
   --gutter / --section-pad-y and get the right value for free, so individual
   components rarely need a media query of their own.
--------------------------------------------------------------------------- */

:root {
  /* ---- brand ---- */
  --ink:   #10243a;
  --bone:  #f6f5f1;
  --slate: #5b6a78;
  --teal:  #1e4d4a;

  /* ---- ink alphas ----
     Borders, rules and decorative marks — never text.

     On --bone, ink needs alpha >= 0.626 to clear WCAG AA's 4.5:1 for small
     text, which is above every value below. So there is no alpha in this
     scale that is legal as body or label copy: --ink-20 lands at 1.49:1 and
     --ink-45 at 2.72:1. Use --slate (5.10:1) for de-emphasised text; the
     typographic treatment (11px mono, caps, wide tracking) is what makes a
     label read as secondary, not the colour. */
  --ink-10: rgba(16, 36, 58, 0.10);
  --ink-20: rgba(16, 36, 58, 0.20);
  --ink-45: rgba(16, 36, 58, 0.45);

  /* ---- bone alphas ----
     Everything that sits on an ink background. These replace the literal
     rgba(246,245,241,X) values that used to be scattered across the
     components, which meant --bone was never really a single source of
     truth — changing it left fifteen copies behind. */
  --bone-15: rgba(246, 245, 241, 0.15);
  --bone-30: rgba(246, 245, 241, 0.30);
  --bone-50: rgba(246, 245, 241, 0.50);
  --bone-55: rgba(246, 245, 241, 0.55);
  --bone-60: rgba(246, 245, 241, 0.60);
  --bone-70: rgba(246, 245, 241, 0.70);
  --bone-75: rgba(246, 245, 241, 0.75);
  --bone-78: rgba(246, 245, 241, 0.78);
  --bone-85: rgba(246, 245, 241, 0.85);

  /* ---- type ---- */
  --sans:  'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --serif: 'Instrument Serif', 'Times New Roman', serif;

  /* Mono-caps label tracking — used by every eyebrow, tag and small label. */
  --track-label: 0.22em;
  --track-tight: 0.16em;

  /* ---- layout ----
     Redefined per breakpoint below. */
  --container-max: 1280px;
  --gutter: 48px;
  --section-pad-y: 72px;   /* the big editorial sections */
  --band-pad-y: 36px;       /* the thin stats / logos bands */
  /* Gap between a section header and the grid it introduces. One token so the
     rhythm inside a section stays proportional to the rhythm between them —
     at the original 140/72 the page read as a slide deck rather than a document. */
  --header-gap: 40px;
  --nav-h: 68px;

  /* Radii — three steps, no more. */
  --r-card: 10px;
  --r-panel: 8px;
  --r-pill: 999px;
}

/* --- 1119px and down: the four-up service grid stops fitting -------------- */
@media (max-width: 1119px) {
  :root {
    --gutter: 40px;
    --section-pad-y: 64px;
    --band-pad-y: 32px;
    --header-gap: 36px;
  }
}

/* --- 899px and down: two-column layouts stack, nav becomes a drawer ------- */
@media (max-width: 899px) {
  :root {
    --gutter: 32px;
    --section-pad-y: 52px;
    --band-pad-y: 28px;
    --header-gap: 32px;
    --nav-h: 60px;
  }
}

/* --- 639px and down: single column throughout ---------------------------- */
@media (max-width: 639px) {
  :root {
    --gutter: 20px;
    --section-pad-y: 44px;
    --band-pad-y: 24px;
    --header-gap: 28px;
  }
}