/* ==========================================================================
   javierpontongonzalez.com — design tokens.
   The single configuration surface for the whole site. Every stylesheet that
   ships (home.css for the home page, doc.css for /cv/, the case studies and
   404) reads from here and declares no raw values of its own. Change a token,
   every page follows.

   HOW TO RESTYLE THIS SITE
   1. Ground   change --paper and --paper-2 (and --paper-rgb to match --paper).
   2. Ink      change --ink, then let --ink-2..--ink-5 walk towards the ground.
   3. Accent   change --accent and --accent-soft (a pale tint of the accent).
   4. Fonts    change --sans and --mono, and the font link in tools/build-site.mjs.
   5. Shell    change --shell for page width and --pad for page gutters.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------ colour --
     A light document palette. Paper ground, fountain-pen indigo ink, one
     muted accent. The ink ramp runs from darkest (--ink) to faintest
     (--ink-5); use it for hierarchy instead of adding new hues. */

  --paper: #f9f8f5;             /* page ground */
  --paper-2: #f1f0ea;           /* alternating section band */
  --paper-rgb: 249, 248, 245;   /* --paper as channels, for translucency */

  /* Every step carries text, so every step clears WCAG AA (4.5:1) on both
     --paper and --paper-2, and the two used for running copy clear AAA (7:1).
     Darken the ground and these have to be re-checked. */
  --ink: #25407e;               /* headings, emphasis, primary button fill */
  --ink-2: #3e4a75;             /* body copy */
  --ink-3: #4d5679;             /* secondary copy, ledes */
  --ink-4: #626880;             /* tertiary copy, muted links */
  --ink-5: #6d7288;             /* faintest labels and meta */

  --accent: #2f62b0;            /* the only accent, one hue with the ink */
  --accent-soft: #eaf0fa;       /* pale accent wash for hover grounds */

  --rule: #dedfe4;              /* hairline between rows and sections */
  --rule-2: #c1c4d0;            /* stronger hairline, opens a block */

  /* Derived surfaces. These exist so no stylesheet has to restate a colour. */
  --paper-veil: rgba(var(--paper-rgb), .88);  /* sticky nav, over content */
  --rule-print: #ccc;                          /* neutral hairline on paper */

  /* -------------------------------------------------------- typography --
     Two families only. Archivo carries everything; the mono is reserved for
     labels, stamps, tags and machine-ish text. */

  --sans: Archivo, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Display scale. Fluid, viewport-driven, used for headings and figures.
     Each step is min / preferred / max: widen the max to shout louder. */

  --step--1: clamp(17px, 1.8vw, 20px);   /* job title in the experience list */
  --step-0: clamp(18px, 1.7vw, 22px);    /* project one-liner */
  --step-1: clamp(24px, 2.6vw, 34px);    /* project title */
  --step-2: clamp(28px, 3vw, 40px);      /* impact figure */
  --step-3: clamp(28px, 3.6vw, 44px);    /* section heading */
  --step-4: clamp(28px, 4vw, 48px);    /* stack statement */
  --step-5: clamp(36px, 5.4vw, 62px);    /* page title */

  /* Text scale. Fixed, because UI text should not grow with the viewport.
     Named by the job it does, smallest first. */

  --text-micro: 10.5px;     /* tightest mono key, definition lists */
  --text-label: 11px;       /* eyebrows, uppercase mono labels, tags */
  --text-stamp: 11.5px;     /* year stamps */
  --text-meta: 12px;        /* mono UI: tabs, chips, node labels */
  --text-code: 13px;        /* mono rows, chevrons, footer */
  --text-ui: 14px;          /* nav, inline links, notes */
  --text-dense: 14.5px;     /* packed copy inside cells and lists */
  --text-action: 15px;      /* button labels */
  --text-prose: 15.5px;     /* long-form body copy */
  --text-body: 16px;        /* document base */
  --text-lede: 17px;        /* section ledes, card headings */
  --text-intro: 18px;       /* hero subheading */

  --measure: 68ch;          /* longest comfortable line of running text */

  /* ----------------------------------------------------------- spacing --
     --pad is the page gutter and the only horizontal measure most rules
     need. The vertical rhythm is three section heights; the gaps are the
     space between stacked things. */

  --shell: 1080px;                          /* max content width */
  --pad: clamp(20px, 5vw, 64px);            /* page gutter, left and right */

  --sec-y: clamp(56px, 7vw, 104px);         /* standard section height */
  --sec-y-sm: clamp(40px, 5vw, 72px);       /* short section, hero underside */
  --hero-y: clamp(48px, 7vw, 96px);         /* hero top */

  --gap-columns: clamp(32px, 5vw, 56px);    /* between grid columns */
  --gap-block: clamp(28px, 3.5vw, 44px);    /* heading to the block below it */
  --gap-block-tight: clamp(28px, 3.5vw, 40px); /* same, above a tab strip */
  --gap-row: clamp(12px, 2.4vw, 24px);      /* inside an accordion row */
  --gap-nav: clamp(14px, 2.4vw, 26px);      /* between nav links */
  --gap-logos: clamp(20px, 3.6vw, 44px);    /* between client marks */

  /* ------------------------------------------------------- line rules --
     Hairlines carry the whole structure, so there are only two weights and
     radii stay close to square. */

  --rule-w: 1px;            /* every hairline and default border */
  --rule-w-2: 2px;          /* accent bars, focus rings, active tab */
  --radius: 2px;            /* buttons, tags, chips, focus ring */
  --radius-lg: 9px;         /* project icon */
  --radius-round: 50%;      /* avatars and the brand mark */
}

/* ------------------------------------------------------------------ print --
   Paper is already white and toner is expensive, so the ramp collapses to
   black on white and the accent stops being a colour. Redefining the same
   tokens means every rule in every sheet follows without knowing about it. */

@media print {
  :root {
    --paper: #fff;
    --paper-2: #fff;
    --paper-veil: #fff;

    --ink: #000;
    --ink-2: #000;
    --ink-3: #1a1a1a;
    --ink-4: #333;
    --ink-5: #444;

    --accent: #000;
    --accent-soft: #fff;

    --rule: var(--rule-print);
    --rule-2: #999;
  }
}