@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700&display=swap');

:root {
  /* Backgrounds */
  --bg-page: #ffffff;
  --bg-panel: #ffffff;
  --bg-surface: #f5f6f8;
  --bg-hover: #eef0f3;

  /* Borders */
  --border: #e8eaed;
  --border-subtle: #f0f1f3;

  /* Text */
  --text-primary: #1a1d23;
  --text-secondary: #4b5563;
  --text-dim: #6b7280;

  /* Accent */
  --accent: #0891b2;
  --accent-soft: rgba(8, 145, 178, 0.08);

  /* Status colors */
  --red: #dc2626;
  --red-bg: rgba(220, 38, 38, 0.06);
  --amber: #d97706;
  --amber-bg: rgba(217, 119, 6, 0.06);
  --yellow: #ca8a04;
  --yellow-bg: rgba(202, 138, 4, 0.06);
  --green: #059669;
  --green-bg: rgba(5, 150, 105, 0.06);

  /* Leverage axis — modifiable years / where the user can move the curve.
     Cool family by design: warm tones (red/amber/yellow) carry severity,
     cool tones carry agency. Aliased to --accent so the leverage primitive
     shares the app's interaction color (hover/selection/NOW marker), which
     reinforces the semantic: cyan = your axis of control. */
  --leverage: var(--accent);
  --leverage-bg: var(--accent-soft);

  /* Cause-of-death identity hues — orthogonal to the severity axis.
     Severity (red/amber/yellow) tells you HOW BAD a threat is for you;
     these tell you WHICH threat. Used wherever multiple threats appear
     side-by-side and need to be distinguished at a glance — currently
     the life-calendar overlay chips and band wash. Drawn from clinical
     branding convention where one exists (oncology violet, hepatic rust,
     respiratory blue) and otherwise spread evenly across the hue wheel
     so adjacent chips are visually separable. All chosen to be clearly
     distinct from --text-dim (the LIVED-cell gray). */
  --cause-heart:       #be123c;
  --cause-cancer:      #7c3aed;
  --cause-stroke:      #0d9488;
  --cause-neuro:       #4338ca;
  --cause-accidents:   #a16207;
  --cause-diabetes:    #be185d;
  --cause-kidney:      #0e7490;
  --cause-liver:       #92400e;
  --cause-suicide:     #475569;
  --cause-respiratory: #1d4ed8;

  /* Life-as-seasons palette — used only in the life-calendar modal. The
     image of a season is its light quality, never an icon or word. Two
     surfaces consume these: lived-cell tints (~12% mix into the lived
     gray, so the past reads as four soft chapters stacked) and a chrome
     wash on the panel background (~4% overlay, defaults to the user's
     current season, cross-fades to the season under the cursor). Severity
     reds and cause hues are far more saturated and remain dominant.
     Boundaries: spring 0–25, summer 25–50, autumn 50–75, winter 75+. */
  --season-spring: #5fb38b;
  --season-summer: #d4a04a;
  --season-autumn: #b8623d;
  --season-winter: #5b7896;

  /* Photographic backdrops. Treatment in css/layout.css applies
     blur(2.5px) saturate(0.4) brightness(1.05) contrast(0.95) at 0.5
     opacity, masked to left/right wings. The image is meant to read as
     light quality, not as subject matter. What works well:
       · Soft horizon landscapes (sky → ground). The eye expects
         atmospheric falloff at the panel's vertical edges; a horizon
         delivers that, and the blurred subject becomes the wing's tone.
       · Pre-muted / hazy / atmospheric source photos. The 2.5px blur is
         small — busy or razor-sharp source frames stay busy underneath.
       · Light-quality cues over iconography: warm new-green (spring),
         golden field haze (summer), amber/sienna canopy (autumn), pale
         cool overcast (winter). NOT leaves, snow, flowers as hero
         subject — the wings should read as "the light of that season,"
         not "a picture of that season."
       · 1600+ wide, landscape orientation. Avoid people, faces, animals,
         hard architectural lines, and centered focal subjects — all
         survive the blur and fight the data grid.
     Override these vars in a local stylesheet to swap per environment.
     Current sources (Unsplash, no attribution required):
       spring  photo-1733251196245-3b741c8d2ff4  misty fresh-green field, hazy treeline
       summer  (retained from prior commit; source not recorded)
       autumn  photo-1683814681924-abecfa398b30  hazy autumn treeline, amber + sienna
       winter  photo-1585768836334-6d23416c542d  pale overcast field, dried weeds */
  --season-img-spring: url('/assets/seasons/spring.jpg');
  --season-img-summer: url('/assets/seasons/summer.jpg');
  --season-img-autumn: url('/assets/seasons/autumn.jpg');
  --season-img-winter: url('/assets/seasons/winter.jpg');

  /* Typography */
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Card elevation. The page is white, so the figure-ground that used
     to come from a gray substrate now has to be earned by the card
     itself. Two-layer recipe: a tight 1–2px contact shadow makes the
     edge feel like it's resting on the page; a softer wider ambient
     gives the card the "paper-on-paper" lift. Combined opacity stays
     under ~0.12 so it never feels gaudy on a clinical surface. */
  --shadow-card:
    0 1px 2px rgba(15, 23, 42, 0.045),
    0 4px 14px -6px rgba(15, 23, 42, 0.08);
  --shadow-card-hover:
    0 2px 4px rgba(15, 23, 42, 0.055),
    0 10px 28px -10px rgba(15, 23, 42, 0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100vh;
  overflow: hidden;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}