/* Longevity List tokens. The only file where a colour is written as a value (scenes.js draws the skies and is exempt).
   Source: specimen-home-3.html, the direction Si approved on 20 Oct 2026. Rules: RULES.md. Check: check.py. */
:root {
  /* colour: white ground, one tint, ink, one accent */
  --ink: #141B21;                     /* near black with a little blue, never pure black */
  --ink-60: rgba(20, 27, 33, .64);    /* labels, notes and second lines only */
  --ink-on-sky: rgba(20, 27, 33, .7); /* second line of the hero headline, over the sky */
  --ink-hover: #333333;               /* solid button hover */
  --on-ink: #FFFFFF;                  /* text on a solid button */
  --ground: #FFFFFF;                  /* white (Si: "we seem to have lost the white again") */
  --tile: #F2F6F8;                    /* one tint for every tile, panel and chart track (Si: no Battenberg) */
  --rule: #E1E7EA;                    /* 1px hairlines */
  --line-hover: #B3B3B3;              /* outline button hover */
  --amber: #A85818;                   /* the hero's low sun. Arrows, note numbers, chart fills, current page only */
  --ice-1: #F0F6F9;                   /* footer gradient, middle */
  --ice-2: #E4EFF4;                   /* footer gradient, bottom */
  --frost-2: #D9E5EC;                 /* the ice field behind glass quotes (ruling 41) */
  --frost-3: #E8F0F4;                 /* the ice field, its paler edge (ruling 41) */

  /* on the twilight head of content pages (ruling 47) */
  --on-night: #FFFFFF;                /* title, breadcrumbs, date line over the twilight blue */
  --on-night-80: rgba(255, 255, 255, .8); /* the title's second line, 30px, large text */
  --twilight-1: #3A5770;              /* blue glass cards (ruling 50): top of the fill */
  --twilight-2: #42607A;              /* blue glass cards: middle of the fill */
  --twilight-text: #54728A;           /* the lightest blue any text sits on: the head (scenes.js keeps text above it) and the cards' fill foot; for check.py */
  --sun-1: #F7E3BC;                   /* yellow glass cards (ruling 51): top of the fill, from the home sun's warm stops */
  --sun-2: #F2D49B;                   /* yellow glass cards: foot of the fill. Ink type only: amber and white fail on it */
  --night-1: #0F2030;                 /* polar night glass cards (ruling 52), from the night scene. White type */
  --night-2: #1E3A50;
  --ice-c1: #E6EFF4;                  /* pale ice glass cards (ruling 52), from the ice field. Ink type */
  --ice-c2: #CDDCE5;
  --rose-1: #F5E4E1;                  /* alpenglow rose glass cards (ruling 52). Ink type */
  --rose-2: #EACDCB;
  --peach-1: #F9E8D7;                 /* dawn peach glass cards (ruling 52), the sunrise band. Ink type */
  --peach-2: #F1CCA8;
  --glass-night-fill: rgba(255, 255, 255, .12);
  --glass-night-edge: rgba(255, 255, 255, .26);

  /* glass: over the home hero sky only (Si: "I liked the glass") */
  --glass-fill: rgba(255, 255, 255, .34);
  --glass-edge: rgba(255, 255, 255, .55);
  --glass-shine: rgba(255, 255, 255, .85);
  --glass-hover: rgba(255, 255, 255, .5);
  --glass-shadow: rgba(21, 34, 43, .35);
  --glass-blur: blur(22px) saturate(1.25);

  /* type: one family, one weight (400). Hierarchy by size and tint, never weight */
  --font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --size-note: 12px;
  --size-marker: 15px;
  --size-body: 16px;
  --size-lead: 22px;
  --size-figure: 30px;
  --size-title: 48px;
  --size-count: 72px;
  --size-hero: clamp(40px, 5vw, 64px);
  --size-close: clamp(36px, 4.4vw, 56px);
  --track-body: -.019em;
  --track-tight: -.04em;
  --track-marker: .08em;              /* the only positive tracking: marker, kicker, sign */

  /* motion: the home hero sky only. Slow enough to notice on a second look, never on the first */
  --flow-cloud: 110s;                 /* cloud texture slides sideways, one tile width, linear, forever */
  --flow-sun: 30s;                    /* sun glow drifts 4% left and right, eased, back and forth */
  --flow-sun-slow: 45s;               /* second glow, opposite direction, so the two never move in step */
  --dur-hover: .2s;                   /* hover colour changes and the answer fade (Polestar's measured 0.2s) */

  /* layout */
  --gutter: 112px;
  --gap-tile: 8px;
  --pad-cell: 24px;                   /* Polestar's table cell padding */
  --section: 120px;                   /* the one gap between sections (Si, 20 Oct) */
  --control: 48px;                    /* button and field height */
  --radius-sm: 8px;                   /* buttons, nav items */
  --radius: 12px;                     /* tiles, panels, glass */
}
@media (max-width: 1100px) { :root { --gutter: 64px; } }
@media (max-width: 800px)  { :root { --gutter: 24px; } }