/* ============================================================
   TOKENS — the only file with values in it.
   styles.css consumes these and defines nothing on its own.
   Change a number here and the whole site follows.
   Use design-console.html to try combinations before editing.
   ============================================================ */

:root {

  /* ---- SURFACE -------------------------------------------------
     The page background. Set --bg-top and --bg-bottom to the same
     value for a flat surface, or different values for a gradient. */

  --bg-top:      #3b5a72;   /* palest end of the logo ramp */
  --bg-bottom:   #132533;   /* deepest end */
  --bg-angle:    180deg;

  /* ---- INK -----------------------------------------------------
     Must contrast with BOTH ends of the surface above. */

  --ink:         #eef2f6;   /* headings and body */
  --ink-muted:   #c8d6e0;   /* secondary paragraphs */
  --rule:        rgba(238,242,246,.20);
  --rule-faint:  rgba(238,242,246,.11);

  /* ---- ACCENT --------------------------------------------------
     Set to var(--ink) for no accent at all. */

  --accent:      #eef2f6;

  /* ---- MARK ----------------------------------------------------
     The fixed watermark. Set --mark-opacity to 0 to remove it.
     Note: at .085 the mark lightens the surface enough that muted
     body text sitting under it at the palest end of the gradient
     runs about 4.25:1, under the 4.5:1 AA threshold. That is a
     deliberate choice, not an oversight. .042 is the level that
     clears AA if it is ever revisited. */

  --mark-opacity:        .085;
  --mark-opacity-recede: .022;

  /* Distance from the top of the viewport. The mark is top-anchored
     rather than centred so that at scroll-top on the home page it
     sits inside the hero, clear of the first section rule. If you
     change --hero-y, --density or the home h1, re-check that it
     still clears. */

  --mark-top:            6.5rem;

  /* ---- TYPE ----------------------------------------------------
     Whole families. Swap the font link in the page <head> too. */

  --font-head:   "Source Serif 4", Georgia, serif;
  --font-body:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --weight-head: 400;
  --weight-body: 400;

  /* Type scale. Every size derives from --step. Raise it to make
     the whole site larger without touching individual sizes. */

  --step:        1rem;
  --size-h1:     calc(var(--step) * 3.2);
  --size-h2:     calc(var(--step) * 1.85);
  --size-h3:     calc(var(--step) * 1.15);
  --size-body:   calc(var(--step) * 1.06);
  --size-lead:   calc(var(--step) * 1.22);
  --size-small:  calc(var(--step) * 0.94);

  --leading:     1.65;   /* body line-height */
  --leading-head: 1.14;  /* heading line-height */
  --tracking-head: -.015em;

  /* ---- SPACE ---------------------------------------------------
     --density multiplies all vertical rhythm. 0.7 is tight,
     1.4 is airy. This is the single biggest layout lever. */

  --density:     0.78;
  --section-y:   calc(5.5rem * var(--density));
  --hero-y:      calc(5rem * var(--density));
  --stack:       calc(1.35rem * var(--density));

  /* ---- MEASURE -------------------------------------------------
     Text column width, and the page container. */

  --measure:     34rem;
  --container:   62rem;
  --gutter:      1.5rem;

  /* ---- SHAPE ---------------------------------------------------- */

  --radius:      0px;
  --rule-weight: 1px;

  /* ---- ALIGNMENT ------------------------------------------------
     Set --align to center and --measure-align to auto for a
     centred layout. */

  --align:         left;
  --measure-align: 0;
}

@media (min-width: 48rem) {
  :root { --step: 1.0625rem; }
}