/* WeatherIQ design tokens, v2 — the ElaraHive system (see ../DESIGN.md).
   Colours are sampled from the ElaraHive v13 screens; every consumer uses var(). A colour
   literal is legal only in a definition in this file. */
:root {
  /* Palette — dark (default) */
  --page: #080f1d;
  --app: #0c1627;
  --tile: #101b2f;
  --tile-raised: #112636;
  --line: #2a405d;
  --line-strong: #5b7392;
  --ink: #ebf6fb;
  --ink-2: #95a6bc;
  --gold: #dcb750;
  --gold-ink: #dcb750;
  --on-gold: #080f1d;
  --cyan: #8ee8f9;
  --red: #f17382;
  --red-ink: #f17382;
  --on-red: #080f1d;
  --green: #679d79;
  --green-ink: #7fb892;
  --on-green: #080f1d;
  --gold-dim: #5f5637;
  --green-dim: #304c48;
  --red-dim: #683b4b;
  --scrim: rgba(8, 15, 29, .72);

  /* Type — one modular scale: base 16 px, ratio √φ (1.2720); every second step is an exact power of φ.
     Line heights snap to the 4 px baseline grid. */
  --ff: Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ff-mono: ui-monospace, 'SF Mono', Consolas, 'Liberation Mono', monospace;
  --t-small: 12.58px;   /* 16 / √φ   */  --lh-small: 20px; --lh-label: 16px;
  --t-body: 16px;       /* base      */  --lh-body: 24px;
  --t-title: 20.35px;   /* 16 × √φ   */  --lh-title: 28px;
  --t-headline: 25.89px;/* 16 × φ    */  --lh-headline: 32px;
  --t-display-s: 32.93px;/* 16 × φ√φ */  --lh-display-s: 40px;
  --t-display: 41.89px; /* 16 × φ²   */  --lh-display: 48px;
  --w-regular: 400; --w-medium: 500; --w-bold: 700; --w-heavy: 800;
  --track-label: .12em;

  /* Space — 8 px grid, 4 px for fine detail; 44 px is the touch square (Apple HIG, WCAG 2.5.5). */
  --g-half: 4px; --g1: 8px; --g-1half: 12px; --g2: 16px; --g3: 24px; --g4: 32px; --g6: 48px; --g8: 64px;
  --tap: 44px;
  --btn-pair: 48px;
  --margin: 16px;                          /* phone margins: 16 and (width - 16) */
  --col-first: 44px;                       /* first column 16..60 */
  --col-gap: 16px;                         /* text column starts at 76 */
  --measure: 66ch;                         /* Bringhurst's ideal line length */
  --phi: 1.6180339887;
  --phi-fr: 1.6180339887fr;               /* golden split for two-column layouts */
  --topbar-h: 104px;
  --tabbar-h: 64px;
}

[data-theme="day"] {
  --page: #f5fbfd;
  --app: #f5fbfd;
  --tile: #ffffff;
  --tile-raised: #eaf5f9;
  --line: #d9e4ec;
  --line-strong: #7d8ea4;
  --ink: #0d1728;
  --ink-2: #52677a;
  --gold: #dcb750;
  --gold-ink: #8a6418;
  --on-gold: #0d1728;
  --cyan: #0e7490;
  --red: #f17382;
  --red-ink: #b4233a;
  --on-red: #0d1728;
  --green: #679d79;
  --green-ink: #3f7a52;
  --on-green: #0d1728;
  --gold-dim: #f1e2b9;
  --green-dim: #c2d8c9;
  --red-dim: #f9c7cd;
  --scrim: rgba(13, 23, 40, .45);
}