/* HeatGuard design tokens: Isotherm palette + General Sans (shared by every app screen).
   Mirrors pitch/slides.html [data-palette="isotherm"]; keep them in sync. */

@font-face {
  font-family: 'General Sans';
  src: url('fonts/GeneralSans-Variable.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font-ui: 'General Sans', 'PingFang SC', 'Noto Sans SC', 'Tamil Sangam MN', 'Noto Sans Tamil', system-ui, sans-serif;

  --paper: #F4F4EF;      /* page */
  --paper-2: #EAEAE3;    /* recessed panels */
  --card: #FFFFFF;
  --ink: #22303C;        /* text */
  --muted: #5D6973;
  --hair: #DADBD3;       /* 1px rules */

  --accent: #E4572E;     /* ember: primary action, high heat */
  --accent-text: #B43D1C; /* ember text on paper/white; retain the data ramp */
  --focus: #22303C;
  --focus-halo: #FFFFFF;
  --accent-ink: #0B1720;  /* accessible small text on ember */
  --amber: #F3A712;      /* moderate */
  --cool: #29728C;       /* teal: cooling, low, links */
  --cool-soft: #A8D5E2;
  --ice: #8FD3F4;        /* icy blue: cooling centres on the map */
  --ice-deep: #2F9ACB;   /* icy blue outline, for definition on paper */
  --inverse: #22303C;
  --on-inverse: #F4F4EF;
  --on-inverse-muted: #A9B3BB;

  /* heat ramp, coolest -> hottest */
  --ramp-0: #A8D5E2;
  --ramp-1: #D9E7DF;
  --ramp-2: #F3A712;
  --ramp-3: #E4572E;
  --ramp-4: #9E2B25;

  /* NEA WBGT heat-stress bands */
  --heat-low: var(--cool-soft);
  --heat-moderate: var(--amber);
  --heat-high: var(--accent);

  --radius: 0;           /* square corners, as on rohanjk.xyz */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --text-xs: 12px;
  --nodata: #DADBD7;
  --amber-ink: #7A5000;
  --rule-on-inverse-white: #ffffff35;
  --rule-on-inverse-hover: rgba(244, 244, 239, .12);
  --rule-on-inverse-subtle: rgba(244, 244, 239, .08);
  --rule-on-inverse-faint: rgba(244, 244, 239, .14);
  --rule-on-inverse-soft: rgba(244, 244, 239, .2);
  --rule-on-inverse: rgba(244, 244, 239, .35);
  --rule-on-inverse-strong: rgba(244, 244, 239, .45);
  --z-backdrop: -1;
  --z-furniture: 1;
  --z-overlay: 2;
  --z-controls: 3;
  --z-status: 4;
  --z-menu: 5;
  --z-toast: 10;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-ui); }