/* ==========================================================================
   FRONTLINE21 — TOKENS
   Recovered brand system. Type, colour, grid, rhythm, motion.
   Nothing here paints.

   Typography and palette are recovered from the approved sources, not chosen:
   the two brand faces are the approved Frontline21 type, redistributed here
   under the SIL Open Font Licence 1.1, whose text is held with the font files
   in this project at assets/type/ (OFL-Quantico.txt, LICENSE-Quantico.txt,
   OFL-Poppins.txt). Colour is sampled from the Frontline21 logo artwork and
   the Frontline21 case study.
   ========================================================================== */

/* --- The two brand faces. OFL licences sit beside the files in assets/type/.
       Only the weights that exist as files are ever declared. --- */

@font-face {
  font-family: 'Quantico';
  src: url('../type/quantico-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Quantico';
  src: url('../type/quantico-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../type/poppins-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../type/poppins-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Families -------------------------------------------------------
     Quantico Bold declares. Poppins explains. Nothing else is loaded, and
     no weight is referenced that does not exist as a file. */
  --font-display: 'Quantico', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-text: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* --- Recovered palette ------------------------------------------------
     Red and blue are the approved brand values. The environment is built
     from the brand charcoal rather than a neutral grey, so the whole page
     sits in the same hue family as the identity. */
  --f21-red: #dc2227;
  --f21-red-hi: #ef2b31;

  /* Navy is a deliberate Frontline21 colour, carried in the supplied logo
     artwork. It is an identity colour rather than an interface one: it holds
     the wordmark in the POSITIVE lockup, on light grounds. The site's own
     ground is near black, so the reverse lockup is what appears here and navy
     is not painted anywhere on the page. It is a token so the positive mark,
     print and the case study all draw the same value.
     Source: 02_Logos, rgb(12.548828%, 18.03894%, 37.646484%). */
  --f21-navy: #202e60;
  --f21-blue: #222f61;
  --f21-charcoal: #1f2424;

  --ink: #121616;        /* the ground */
  --ink-deep: #0c0f0f;   /* sunk fields */
  --ink-raised: #1f2424; /* brand charcoal, plates and panels */
  --ink-line: #2f3636;   /* structural hairlines */
  --ink-line-soft: #232a2a;

  --paper: #f4f5f4;      /* primary type, 16.9:1 on ink */
  --paper-dim: #b8bebe;  /* body copy, 10.1:1. Lifted from #9aa0a0 in the
                            reconciliation pass: the body text was reading as
                            recessive grey at normal desktop distance. */
  --paper-faint: #8a9292;/* captions and labels, 5.7:1 */
  --paper-mute: #4a5252; /* decoration only, never text */

  /* Red clears 3:1 on ink but not 4.5:1, so it carries rules, fills, large
     display accents and active states. Never small text. */
  --focus: var(--f21-red-hi);

  /* --- Grid ------------------------------------------------------------ */
  --cols: 4;
  --margin: 20px;
  --gutter: 14px;

  /* --- Rhythm ----------------------------------------------------------- */
  --movement-pad: clamp(84px, 11vh, 168px);
  --stack-xs: 8px;
  --stack-sm: 16px;
  --stack-md: 28px;
  --stack-lg: clamp(40px, 5vw, 72px);
  --stack-xl: clamp(64px, 8vw, 120px);

  /* --- Type scale, fluid ------------------------------------------------
     Quantico is a wide face, so the display sizes run a little tighter than
     a grotesque would need at the same measure. */
  --t-display: clamp(31px, 10.2vw, 50px);
  --t-h2: clamp(26px, 7.2vw, 38px);
  --t-h3: clamp(19px, 4vw, 23px);
  --t-deck: clamp(18px, 4.6vw, 21px);
  --t-lead: clamp(16px, 2.1vw, 18px);
  --t-body: 16px;
  --t-body-lg: 16.5px;
  --t-pull: clamp(20px, 5.4vw, 24px);
  --t-small: 13.5px;
  --t-micro: 10.5px;

  /* The cluster rhythm from LAYOUT_RATIONALE: 24 to 32 px between a headline
     and its deck on a phone, 40 to 56 on a desktop, and never a band of dead
     ground inside one cluster. */
  --cluster-gap: 26px;

  /* --- The measured Quantico hierarchy -----------------------------------
     From the Wall of Truth type study: tracking and leading by rendered
     size. Explicit roles, so a monumental headline's negative spacing can
     never be inherited by a control or a paragraph. */
  --track-monumental: -0.025em;   /* Quantico 96 px and above */
  --lead-monumental: 0.84;
  --track-intermediate: -0.018em; /* 56 to 95 px */
  --lead-intermediate: 0.87;
  --track-compact: -0.010em;      /* 36 to 55 px */
  --lead-compact: 0.90;
  --track-reflow: 0;              /* below 36 px: ordinary leading */
  --lead-reflow: 1.0;
  --track-label: 0.025em;         /* small clean Quantico labels */
  --lead-label: 1.2;

  /* --- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-line: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-mid: 520ms;
  --dur-slow: 900ms;

  --border-hair: 1px solid var(--ink-line);
  --border-hair-soft: 1px solid var(--ink-line-soft);
}

@media (min-width: 721px) {
  :root {
    --cols: 6;
    --margin: clamp(32px, 5vw, 56px);
    --gutter: clamp(18px, 2vw, 24px);
    --t-display: clamp(46px, 7.1vw, 88px);
    --t-h2: clamp(34px, 5.2vw, 58px);
    --t-h3: clamp(21px, 2.3vw, 27px);
    --t-deck: clamp(19px, 2.2vw, 24px);
    --t-body: 16.5px;
    --t-body-lg: 17.5px;
    --t-pull: clamp(22px, 2.6vw, 30px);
    --t-micro: 11px;
    --cluster-gap: 36px;
  }
}

@media (min-width: 1024px) {
  :root {
    --cols: 8;
    --margin: clamp(48px, 4.6vw, 88px);
    --gutter: clamp(20px, 1.5vw, 28px);
    --t-display: clamp(68px, 6.9vw, 128px);
    --t-h2: clamp(44px, 4.3vw, 74px);
    --t-h3: clamp(24px, 1.9vw, 33px);
    --t-deck: clamp(21px, 1.5vw, 27px);
    --t-lead: clamp(17px, 1.3vw, 21px);
    --t-body: 17px;
    --t-body-lg: 18.5px;
    --t-pull: clamp(26px, 2vw, 36px);
    --t-small: 14px;
    --t-micro: 11px;
    --cluster-gap: clamp(40px, 3vw, 56px);
  }
}