/* ------------------------------------------------------------------------
   tokens.css — the one place a colour is written down.

   This file is ` visual-identity/UX/variables.css` — the RainLift Atmosphere
   design system — plus the two things the atlas needs that the design system
   does not carry: the eight data ramps and the basemap. Edit `variables.css`
   and this file together; they are the same values in two places on purpose,
   because one of them has to live inside the deployed site.

   THREE LAYERS

     A  the Atmosphere palette, in the three theme blocks below
     B  an ALIAS shim — `--bg`, `--fg`, `--card`, `--border`, `--font`, …
        pointing at their Atmosphere equivalents
     C  atlas-only tokens: the data ramps, the basemap, the sparkline

   Layer B is what lets the atlas's own vocabulary carry the design system.
   DESIGN.md line 291: "Its existing --bg / --fg / --card / --border map
   one-to-one onto ground, ink and hairline, so the app takes the identity
   without a rewrite." An alias is one declaration in bare `:root` and still
   follows the weather, because `var()` resolves at the point of USE — the
   alias points at a name, and the name is what the three blocks re-point.

   Five tokens are NOT aliases, because their meaning differs rather than
   merely moves: `--accent` (Radar blue, spent once per screen),
   `--accent-fg`, `--demand`, `--supply`, and `--radius` (a five-rung ladder
   rather than one value). Those are set at the call site.

   THREE BLOCKS, ALWAYS IN THIS ORDER
     1. :root                                  the complete CLEAR palette
     2. @media (prefers-color-scheme: dark)    RAIN, guarded so an explicit
        :root:not([data-theme="light"])        light choice beats a dark OS
     3. :root[data-theme="dark"]               RAIN again, so the switch also
                                               wins in the other direction

   Blocks 2 and 3 are identical by necessity — a media query cannot join a
   selector list. Keep them in step. Never define a colour in only one of
   them: in the un-stamped state, which is what most visitors get, it would
   never apply. DESIGN.md calls this "the single most important rule in the
   system", and it is also why every `--map-*` value appears three times
   below even where the two weathers agree.

   Two rules for anyone editing this file, both load-bearing:

   * Values JavaScript reads are handed back verbatim, so write them the way
     MapLibre wants them — `rgba(19,26,38,.42)`, no spaces after commas
     inside the parens. Ramp lists are split on the comma, so those may be
     spaced.
   * Ramp stops must stay bare `#rrggbb`. `util.js` `hexToRgb` → `mixHex` →
     `resampleRamp` parses hex and nothing else, so an `rgba()`, a
     `color-mix()` or a `light-dark()` in a ramp yields `#NaNNaNNaN` and
     MapLibre throws on `setPaintProperty` without naming the token. A
     `var()` is fine — it is substituted before the value is computed.
   ---------------------------------------------------------------------- */


/* =================================================================== FACE */
/* Figtree — the logo's own face, self-hosted as a latin variable subset.
   One family sets display, UI, body AND every number: it carries tabular
   figures on a 300–900 axis, which is why the Atlas needs no second face for
   its columns and why 480 is an exact weight rather than a rounding to 500.
   A monospace and a display serif were each tested as a separate detail
   layer and rejected (DESIGN.md, "Faces that were tested and rejected"). */

@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree-variable.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}


/* ==================================================== CLEAR — the default */

:root {

  /* --- atmosphere ----------------------------------------------------- */
  /* Read by Sky.astro's six layers. --sun-on / --rain-on are the whole
     cross-fade: every layer's opacity is one of them, or a calc() between
     them, so the scene changes weather on a token swap and nothing else. */
  --sky-near:            #8ec6ee;
  --sky-far:             #eaf4ff;
  --sky-wash:            linear-gradient(#83bce3cc, #a8d6f0a3 44%, #deeffb99 74%, #f5faffad);
  --sun-on:              1;
  --rain-on:             0;
  --cloud-core:          #fffffffa;
  --cloud-mid:           #ffffffb3;
  --cloud-edge:          #ffffff00;
  --tint:                #d8ebff;
  --tint-opacity:        .08;
  --grain-opacity:       .075;
  --grain-filter:        brightness(118%);
  --vignette:            radial-gradient(125% 62% at 50% 100%, #ffffff8c 0, #ffffff00 62%);

  /* --- ink ------------------------------------------------------------ */
  /* Alphas are set against the SKY, not against paper — the pale end of the
     gradient is the worst case. Soft 6.8:1, faint 4.7:1, both AA at 14px.
     On the atlas's opaque grounds they are far clearer: over --ground-raised
     soft is 8.2:1 and faint 5.4:1. */
  --ink:                 #131a26;
  --ink-soft:            #131a26c4;
  --ink-faint:           #131a26a6;
  --ink-hairline:        #131a2624;
  /* One step up from the hairline, for the rare edge that has to survive a
     hover state. This is what `--border-strong` aliases onto. */
  --ink-hairline-strong: #131a263d;

  /* --- glass ---------------------------------------------------------- */
  --glass-a:             #fdfeffc4;
  --glass-b:             #eef4fb70;
  --glass-line:          #ffffffad;
  --glass-line-lit:      #ffffffdb;
  --glass-inner:         inset 0 1px 0 #ffffffc9;
  --glass-shadow:        0 14px 38px #10182714;
  --glass-shadow-lg:     0 26px 64px #1018271f;

  /* --- solid ground --------------------------------------------------- */
  --ground:              #eef3f9;
  --ground-raised:       #ffffff;
  --ground-sunk:         #e3ebf4;

  /* --- the application's chrome ---------------------------------------- */
  /* The reading pages float their chrome on the sky and let the glass filter
     it. The atlas cannot: its bar and panel are cells of a grid with the map
     between them, so there is nothing behind them to filter, and glass over
     flat ground resolves to white — a bright nothing where every other page
     shows weather. So the result is painted instead of filtered: --chrome is
     the value the site's nav actually renders at over the landing sky
     (sampled: #d0eeff in Clear, #293655 in Rain), and the two steps around it
     are the surfaces that sit on it.

     ONE ladder, three values, and the direction is the same in both weathers
     — lift is lighter, sunk is darker. That is what --wash cannot do: it is
     ink in Clear and light in Rain, so a wash-recessed card becomes the
     brightest thing in a Rain panel. */
  --chrome-lift:         #f4fbff;   /* raised on the chrome: the live card  */
  --chrome:              #daedfb;   /* the bar and the panel themselves     */
  --chrome-sunk:         #c7e2f6;   /* recessed: the cards you are not in   */

  /* --- accent: Radar --------------------------------------------------- */
  /* Instrument blue, hue 211°, white text 5.5:1. One value in both weathers:
     it is far more saturated than any sky the page paints, so separation
     comes from chroma rather than lightness and the brand colour never shifts
     with the sky. Only the glow and quiet alphas differ, because the ground
     behind them does. Reserved for ONE primary action per screen — chrome
     washes use --wash, which is ink, never the accent. */
  --accent:              #0b67c9;
  --accent-ink:          #ffffff;
  --accent-hover:        #0f6fd6;
  --accent-glow:         #0b67c940;
  --accent-quiet:        #0b67c916;
  --wash:                #131a260a;
  --lit-edge:            #ffffff;

  /* --- data: the Atlas only -------------------------------------------- */
  /* The three view identities. These are DESIGN.md's authored values, and
     they are IDENTITIES, not magnitudes: "the views are mutually exclusive
     and each is named in the control that selects it, so identity is carried
     by the label and colour only follows." The dot beside "Water Shortage"
     says which view is up; the six-band ramp below it says how much. They
     are different jobs and do not share a declaration.

     Deepened off DESIGN.md's authored trio (#cf2f2f / #2563eb / #15803d),
     which were a saturated primary red, blue and green — three hues at full
     chroma sitting beside each other read as a paint box, not as a set. These
     are the same three hues taken down in lightness and chroma to one band:
     brick, petrol, pine. Identity is unaffected (nothing about "which view"
     needs full saturation), and the red now sits between ramp-5 and ramp-6,
     so the key no longer looks like a different red from the map's. */
  --deficit:             #9d3330;
  --resource:            #1f5680;
  --bridge:              #2a6b4f;

  /* Nearly the chroma DESIGN.md first authored (#cf2f2f / #2563eb / #15803d).
     The deepened trio above is for a 10 px patch, where full chroma reads as
     a paint box; these are for the one place identity is carried by TYPE —
     the panel's view cards and the landing window's view names, where the
     NAME is the key and no patch is drawn at all.

     One step under the authored values, because the surface under them is no
     longer paper: a light blue chrome costs roughly a stop of contrast, and
     the authored red is 3.9:1 on --chrome-sunk. These are 4.7:1, 4.7:1 and
     5.2:1 there, 5.9:1 on --chrome-lift, and AA on both.
     Never on a map: the ramps are unaffected. */
  --deficit-vivid:       #b62b2b;
  --resource-vivid:      #1f57d6;
  --bridge-vivid:        #126734;

  /* The authored sequential ramp for the Deficit view, six steps. Also
     exposed as the comma list `--ramp-reds` in layer C, and used a stop at a
     time by the Atlas window on the landing page. */
  --ramp-1:              #f3cfcf;
  --ramp-2:              #e9a2a2;
  --ramp-3:              #dd7676;
  --ramp-4:              #cf5252;
  --ramp-5:              #b02f2f;
  --ramp-6:              #7d1d1d;

  color-scheme: light;


  /* ====================================================================
     THEME-INDEPENDENT — shape, type, rhythm, motion.
     Declared once; the RAIN blocks below never touch them.
     ==================================================================== */

  /* --- type ----------------------------------------------------------- */
  /* ONE FAMILY, THREE VOICES. What separates a heading from a label from a
     datum is tracking and figure style, never a different typeface. */
  --font-display:        "Figtree", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-data:           var(--font-display);
  /* Kept for literal code — a store key in a note, a formula in the
     methodology. DESIGN.md rejected a monospace as a DETAIL LAYER for units
     and figures, which Figtree's tabular figures do better; it did not
     reject one for text that is actually code. */
  --mono:                ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --weight-body:         400;
  --weight-display:      480;   /* the variable axis makes this exact      */
  --weight-strong:       500;
  /* The lockup's weight. No rule sets it — the nav and the footer render the
     artwork, which carries its own outlines — but it is the system's record
     of what the wordmark IS, for anyone setting it in live type (a slide, an
     email signature, an OG image). */
  --weight-wordmark:     800;

  --text-eyebrow:        11px;
  --leading-eyebrow:     1;
  --tracking-eyebrow:    .17em;  /* uppercase labels                       */

  --text-data:           13px;
  --leading-data:        1.4;
  --tracking-data:       .05em;  /* the measured voice, tabular figures    */

  --text-fine:           14px;
  --leading-fine:        1.55;

  --text-body:           16px;
  --leading-body:        1.6;

  --text-lead:           clamp(17px, 1.55vw, 19px);
  --leading-lead:        1.58;

  --text-h3:             21px;
  --leading-h3:          1.25;
  --tracking-h3:         -.016em;

  --text-h2:             clamp(28px, 3.4vw, 38px);
  --leading-h2:          1.13;
  --tracking-h2:         -.024em;

  --text-h1:             clamp(38px, 6.1vw, 66px);
  --leading-h1:          1.045;
  --tracking-h1:         -.028em;

  /* The Atlas runs denser than the reading pages: a 336px panel cannot
     carry a 16px body and an 11px floor. It inherits the VOICES — family,
     tracking, figure style, the 500 weight ceiling — on its own micro-step.
     Four sizes, no half-pixels. */
  --text-app-xs:         10px;
  --text-app-sm:         11px;
  --text-app:            12px;
  --text-app-lg:         13px;

  /* --- spacing -------------------------------------------------------- */
  --space-unit:          4px;
  --space-4:             4px;
  --space-8:             8px;
  --space-12:            12px;
  --space-16:            16px;
  --space-20:            20px;
  --space-24:            24px;
  --space-28:            28px;
  --space-32:            32px;
  --space-40:            40px;
  --space-56:            56px;
  --space-72:            72px;
  --space-96:            96px;
  --space-128:           128px;

  /* --- layout --------------------------------------------------------- */
  --page-max-width:      1080px;
  --measure:             62ch;   /* running text never exceeds this        */
  --section-rhythm:      clamp(72px, 10vh, 116px);
  --card-padding:        22px;
  --panel-width:         336px;
  --topbar-height:       52px;

  /* --- radius --------------------------------------------------------- */
  /* Glass reads as a thicker material than paint, so cards open past the
     8px default. Controls are pills; nothing is square. */
  --radius-default:      8px;
  --radius-control:      11px;
  --radius-card:         18px;
  --radius-window:       22px;
  --radius-pill:         999px;

  /* --- motion --------------------------------------------------------- */
  /* Three durations. The weather cross-fade is slow because it is the one
     scripted moment in the system; chrome follows at a third of it. */
  --ease:                cubic-bezier(.4, 0, .2, 1);
  --t-weather:           1.6s var(--ease);
  --t-theme:             .55s var(--ease);
  --t-ui:                .18s var(--ease);


  /* ====================================================================
     LAYER C — the Atlas only. Ramps, basemap, sparkline.
     The design system stops at the three view identities; everything below
     is the cartography, which is this application's alone.
     ==================================================================== */

  /* --- data ramps ----------------------------------------------------- */
  /* Sequential, six steps, light → dark in Clear. `reds` is DESIGN.md's
     authored Deficit ramp verbatim; `blues` and `greens` are the same
     lightness ladder transposed to hue 221° and 142°, so the three views
     read as one instrument at three settings rather than three palettes.
     The store and the manifest carry the ramp NAME, never hex
     (test_manifest_ramp_is_a_name_never_a_hex_list). */
  --ramp-reds:      var(--ramp-1), var(--ramp-2), var(--ramp-3),
                    var(--ramp-4), var(--ramp-5), var(--ramp-6);
  --ramp-blues:     #cdd9f3, #a2b9e9, #7596df, #4c77d5, #2a56b5, #1d3c7d;
  --ramp-greens:    #cef3dc, #a3e8bc, #76dd9c, #4ed37f, #2db25e, #1f7b41;

  /* The Water Shortage view's two tiers, and the one pair chosen against the
     COMPOSITE rather than the token: the fill layer runs at 0.85 opacity
     over --map-land, so a ramp picked from its hex alone starts invisible.
     Every `greys` stop composites lighter than every `redsDeep` stop, so the
     below-normal band can never look more severe than the drought it is not
     yet in. The binding pair is the darkest grey against the lightest deep
     red:
       greys[5]    #99a7be over #ffffff at .85 -> #a8b4c8  Y = .4514
       redsDeep[0] #d96666 over #ffffff at .85 -> #df7d7d  Y = .3184   ok
     `reds` could not simply be reused: its light end is paler than any
     legible grey. */
  --ramp-redsDeep:  #d96666, #d14747, #c23030, #a32929, #852121, #661a1a;
  --ramp-greys:     #edeff3, #dce1e8, #cad2dd, #b9c3d2, #a9b5c8, #99a7be;
  --ramp-diverging: #7d1d1d, #b02f2f, #dd7676, #eef3f9, #7596df, #2a56b5, #1d3c7d;
  /* Single stop: the resource-floor mask, a different thing entirely. */
  --ramp-grey:      #b9c3d2;

  /* Aqueduct's five baseline-water-stress bands. Categorical, one list for
     both weathers: every stop clears the white card and the near-black one.
     Rendered only on the region card (modal.js), never on the map, so the
     0.85 composite does not apply to it. */
  --ramp-bws:       #2db25e, #e8b62c, #e07d2b, #cf5252, #7d1d1d;

  /* --- basemap -------------------------------------------------------- */
  /* The ground family, extended by one step below --ground for the ocean.
     Clear: ocean .6987 < sky .8228 < horizon .8912 < land 1.0000.
     `none` and `no-need` are fully transparent by intent — "measured, and
     nothing is missing" is the one finding that deserves to look like
     nothing at all. */
  --map-ocean:       #cfdbea;
  --map-land:        #ffffff;
  --map-land-line:   #8296b1;
  --map-grat:        #b6c5d7;
  --map-border:      rgba(19,26,38,.42);
  --map-border-over: rgba(19,26,38,.75);
  --map-region-line: rgba(19,26,38,.30);
  --map-sel-line:    #131a26;
  --map-none:        rgba(0,0,0,0);
  --map-no-need:     rgba(0,0,0,0);
  /* Opaque on purpose: the fill layer applies its own 0.85, so an alpha here
     would double up.
       #e0e8f2 over #ffffff at .85 -> #e5ebf4  Y = .8261, a clear step below
       bare land (1.0000) and clearly lighter than ramp band 1 (Y .7236). */
  --map-low-bin:     #e0e8f2;
  /* RGBA bytes, not a CSS colour: the hatch is baked into a pattern image
     (hatchImage), not handed to a paint property. */
  --map-hatch:       147 163 187 205;
  --map-sky:         #e3ebf4;
  --map-horizon:     #eef3f9;
  --map-city-dot:    #3b4759;
  --map-city-text:   #2a3446;
  --map-region-text: #57647a;
  --map-label-halo:  rgba(255,255,255,.92);

  /* --- shortage bands, in the CHARTS ---------------------------------- */
  /* The two-way partition the Overview's month histogram and the country
     panel's regions-in-shortage row both draw. NOT the map: on the map these
     are two six-step ramps read against the .85 land composite, and a bar on a
     card has neither that composite nor a magnitude to encode — it has two
     classes and needs two colours. Both charts read these two tokens rather
     than picking their own stops out of the ramps, so the same two classes
     are the same two colours in every panel.
     Below-normal is a WARM neutral, not the map's cool grey: on a card, grey
     is what a reader has been taught means "no data", and this class is a
     measurement. The invariant is unchanged from the ramps' — below-normal
     must read MILDER than drought, which on paper means lighter and on a dark
     ground means dimmer. */
  --band-drought:   #b02f2f;
  --band-below:     #c8a9a2;

  /* --- sparkline ------------------------------------------------------ */
  /* The "nothing happening" colour, and what a positive mean is mixed toward
     to keep it behind the curve it annotates. Both are read by modal.js and
     `--spark-mean-mix` is fed to `mixHex`, so it must resolve to bare hex. */
  --spark-neutral:  #8794a9;
  --spark-mean-mix: var(--lit-edge);
}


/* =============================================================== RAIN — 2 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky-near:          #293349;
    --sky-far:           #151d31;
    --sky-wash:          linear-gradient(#1d2438e6, #202940b8 44%, #2a3450a1 74%, #323d5ca8);
    --sun-on:            0;
    --rain-on:           1;
    --cloud-core:        #e0ebff85;
    --cloud-mid:         #89a0cc42;
    --cloud-edge:        #37425f00;
    --tint:              #83abf8;
    --tint-opacity:      .15;
    --grain-opacity:     .13;
    --grain-filter:      brightness(102%) contrast(112%);
    --vignette:          radial-gradient(125% 62% at 50% 100%, #070c18a6 0, #070c1800 62%);

    --ink:               #eef3fb;
    --ink-soft:          #eef3fbc2;
    --ink-faint:         #eef3fb99;
    --ink-hairline:      #eef3fb26;
    --ink-hairline-strong: #eef3fb45;

    --glass-a:           #2b3348a6;
    --glass-b:           #161d2e70;
    --glass-line:        #ffffff2b;
    --glass-line-lit:    #ffffff4d;
    --glass-inner:       inset 0 1px 0 #ffffff33;
    --glass-shadow:      0 16px 42px #03071666;
    --glass-shadow-lg:   0 30px 70px #03071680;

    --ground:            #141a28;
    --ground-raised:     #1b2233;
    --ground-sunk:       #232b3e;

    /* Rain's chrome ladder. Sampled the same way — the nav over the Rain sky
       renders at #293655 — and set one step under it, because the landing
       wears that value on a floating pill and the atlas wears it on a
       full-height panel. --chrome-lift is where the sample lands. */
    --chrome-lift:       #2c3a58;
    --chrome:            #212d46;
    --chrome-sunk:       #18202f;

    --accent:            #0b67c9;
    --accent-ink:        #ffffff;
    --accent-hover:      #0f6fd6;
    --accent-glow:       #0b67c959;
    --accent-quiet:      #0b67c92e;
    --wash:              #eef3fb0f;
    --lit-edge:          #eef3fb;

    /* Rain cannot go deeper — on a dark ground a deep hue disappears — so the
       same correction runs the other way: chroma down, lightness held, which
       turns the three neons into clay, steel and jade. */
    --deficit:           #e0847e;
    --resource:          #86b8e2;
    --bridge:            #7cc09c;

    /* Same job as Clear's vivid trio, selected the same way the ramps are:
       toward brighter, not toward deeper. 6.4:1, 6.5:1 and 7.6:1 on
       --ground-raised. */
    --deficit-vivid:     #ff8f89;
    --resource-vivid:    #5aa9ff;
    --bridge-vivid:      #4ade9a;

    /* Rain is SELECTED, not inverted: on a dark ground magnitude runs toward
       brighter, so this is not the Clear ramp reversed. */
    --ramp-1:            #4a1a1a;
    --ramp-2:            #6e2222;
    --ramp-3:            #952c2c;
    --ramp-4:            #c03d3d;
    --ramp-5:            #e06767;
    --ramp-6:            #f6a2a2;

    color-scheme: dark;

    --ramp-reds:      var(--ramp-1), var(--ramp-2), var(--ramp-3),
                      var(--ramp-4), var(--ramp-5), var(--ramp-6);
    --ramp-blues:     #19294b, #223a6e, #2c4d94, #3d66c0, #678de0, #a2bdf6;
    --ramp-greens:    #194b2b, #226e3e, #2c9453, #3dc06d, #67e093, #a2f6c1;
    /* Dark cannot satisfy the Clear tiers' rule outright — severity reads as
       brightness here and the dimmest red already sits close to the land. The
       greys stay below the red ramp's MIDPOINT and lean on chroma instead: a
       neutral never reads as more alarming than a red of the same brightness.
         greys[5]    #546683 over #1b2233 at .85 -> Y .1048
         redsDeep[2] #cf3333 over #1b2233 at .85 -> Y .1206   ok */
    --ramp-redsDeep:  #8b2121, #b02929, #cf3333, #d75454, #e27373, #ee9696;
    --ramp-greys:     #28313f, #313c4d, #3a475a, #425168, #4b5c76, #546683;
    --ramp-diverging: #f6a2a2, #e06767, #952c2c, #3a4459, #2c4d94, #678de0, #a2bdf6;
    --ramp-grey:      #425168;
    --ramp-bws:       #2db25e, #e8b62c, #e07d2b, #cf5252, #7d1d1d;

    /* --map-land is --ground-raised, #1b2233 (Y .0162) — the value every
       dark-mode composite above is derived against. The ocean drops one step
       BELOW --ground, because --ground to --ground-raised is only a 1.55:1
       ratio and cannot carry ocean-against-land on its own. */
    --map-ocean:       #0b1120;
    --map-land:        #1b2233;
    --map-land-line:   #5d6d8b;
    --map-grat:        #202940;
    --map-border:      rgba(238,243,251,.34);
    --map-border-over: rgba(238,243,251,.80);
    --map-region-line: rgba(238,243,251,.28);
    --map-sel-line:    #eef3fb;
    --map-none:        rgba(0,0,0,0);
    --map-no-need:     rgba(0,0,0,0);
    /* Opaque here too, for the inverted reason: on a dark ground an alpha
       lifts bin 0 ABOVE the first real band and stands the legend's ordering
       on its head. The window between bare land (Y .0162) and band 1
       (Y .0207) is ~0.005 wide, so the separation is carried by chroma —
       #1f2739 is neutral-blue, #4a1a1a is red — which is the same argument
       the dark greys ramp above already makes. */
    --map-low-bin:     #1f2739;
    --map-hatch:       122 139 168 190;
    --map-sky:         #232b3e;
    --map-horizon:     #2e3852;
    --map-city-dot:    #c3cede;
    --map-city-text:   #dbe3ef;
    --map-region-text: #a8b4c8;
    --map-label-halo:  rgba(20,26,40,.90);

    /* Same rule as the ramps above, on a card rather than over land: severity
       reads as brightness here, so below-normal is the DIMMER of the pair and
       leans on chroma to stay a warm neutral rather than a second red. */
    --band-drought:   #d75454;
    --band-below:     #8a6f6c;

    --spark-neutral:  #8794a9;
    --spark-mean-mix: var(--lit-edge);
  }
}


/* =============================================================== RAIN — 3 */
/* Identical to block 2. A media query cannot join a selector list, so this
   is written twice on purpose; edit both or neither. */

:root[data-theme="dark"] {
  --sky-near:            #293349;
  --sky-far:             #151d31;
  --sky-wash:            linear-gradient(#1d2438e6, #202940b8 44%, #2a3450a1 74%, #323d5ca8);
  --sun-on:              0;
  --rain-on:             1;
  --cloud-core:          #e0ebff85;
  --cloud-mid:           #89a0cc42;
  --cloud-edge:          #37425f00;
  --tint:                #83abf8;
  --tint-opacity:        .15;
  --grain-opacity:       .13;
  --grain-filter:        brightness(102%) contrast(112%);
  --vignette:            radial-gradient(125% 62% at 50% 100%, #070c18a6 0, #070c1800 62%);

  --ink:                 #eef3fb;
  --ink-soft:            #eef3fbc2;
  --ink-faint:           #eef3fb99;
  --ink-hairline:        #eef3fb26;
  --ink-hairline-strong: #eef3fb45;

  --glass-a:             #2b3348a6;
  --glass-b:             #161d2e70;
  --glass-line:          #ffffff2b;
  --glass-line-lit:      #ffffff4d;
  --glass-inner:         inset 0 1px 0 #ffffff33;
  --glass-shadow:        0 16px 42px #03071666;
  --glass-shadow-lg:     0 30px 70px #03071680;

  --ground:              #141a28;
  --ground-raised:       #1b2233;
  --ground-sunk:         #232b3e;

  --chrome-lift:         #2c3a58;
  --chrome:              #212d46;
  --chrome-sunk:         #18202f;

  --accent:              #0b67c9;
  --accent-ink:          #ffffff;
  --accent-hover:        #0f6fd6;
  --accent-glow:         #0b67c959;
  --accent-quiet:        #0b67c92e;
  --wash:                #eef3fb0f;
  --lit-edge:            #eef3fb;

  --deficit:             #e0847e;
  --resource:            #86b8e2;
  --bridge:              #7cc09c;

  --deficit-vivid:       #ff8f89;
  --resource-vivid:      #5aa9ff;
  --bridge-vivid:        #4ade9a;

  --ramp-1:              #4a1a1a;
  --ramp-2:              #6e2222;
  --ramp-3:              #952c2c;
  --ramp-4:              #c03d3d;
  --ramp-5:              #e06767;
  --ramp-6:              #f6a2a2;

  color-scheme: dark;

  --ramp-reds:      var(--ramp-1), var(--ramp-2), var(--ramp-3),
                    var(--ramp-4), var(--ramp-5), var(--ramp-6);
  --ramp-blues:     #19294b, #223a6e, #2c4d94, #3d66c0, #678de0, #a2bdf6;
  --ramp-greens:    #194b2b, #226e3e, #2c9453, #3dc06d, #67e093, #a2f6c1;
  --ramp-redsDeep:  #8b2121, #b02929, #cf3333, #d75454, #e27373, #ee9696;
  --ramp-greys:     #28313f, #313c4d, #3a475a, #425168, #4b5c76, #546683;
  --ramp-diverging: #f6a2a2, #e06767, #952c2c, #3a4459, #2c4d94, #678de0, #a2bdf6;
  --ramp-grey:      #425168;
  --ramp-bws:       #2db25e, #e8b62c, #e07d2b, #cf5252, #7d1d1d;

  --map-ocean:       #0b1120;
  --map-land:        #1b2233;
  --map-land-line:   #5d6d8b;
  --map-grat:        #202940;
  --map-border:      rgba(238,243,251,.34);
  --map-border-over: rgba(238,243,251,.80);
  --map-region-line: rgba(238,243,251,.28);
  --map-sel-line:    #eef3fb;
  --map-none:        rgba(0,0,0,0);
  --map-no-need:     rgba(0,0,0,0);
  --map-low-bin:     #1f2739;
  --map-hatch:       122 139 168 190;
  --map-sky:         #232b3e;
  --map-horizon:     #2e3852;
  --map-city-dot:    #c3cede;
  --map-city-text:   #dbe3ef;
  --map-region-text: #a8b4c8;
  --map-label-halo:  rgba(20,26,40,.90);

  --band-drought:   #d75454;
  --band-below:     #8a6f6c;

  --spark-neutral:  #8794a9;
  --spark-mean-mix: var(--lit-edge);
}

:root[data-theme="light"] { color-scheme: light; }


/* ================================================= LAYER B — the aliases */
/* Declared ONCE, in bare :root, and still weather-correct: `var()` resolves
   where it is USED, so an alias points at a name and the three blocks above
   are what re-point the name.

   Every one of these is the atlas's original vocabulary. Nothing new should
   be written against them — new rules use the Atmosphere name directly — but
   they are not deprecated either: `--bg` really is the ground, and a rule
   that says so is not worse for saying it in the older word. */

:root {
  --bg:            var(--ground);
  --fg:            var(--ink);
  --muted:         var(--wash);
  --muted-fg:      var(--ink-faint);
  --border:        var(--ink-hairline);
  --border-strong: var(--ink-hairline-strong);
  --card:          var(--ground-raised);
  /* A focus ring is a state, not decoration — so it is allowed the accent,
     and takes one value in both weathers like everything else Radar. */
  --ring:          var(--accent);
  --shadow:        var(--glass-shadow);
  --shadow-sm:     var(--glass-inner);
  --shadow-chip:   0 1px 3px #131a2647;
  --scrim:         #131a2673;
  --font:          var(--font-display);
  --panel-w:       var(--panel-width);
  --topbar-h:      var(--topbar-height);
}

/* The two aliases whose own value moves with the weather have to be stated
   in all three blocks like anything else. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-chip: 0 1px 3px #03071680;
    --scrim:       #070c18a6;
  }
}
:root[data-theme="dark"] {
  --shadow-chip: 0 1px 3px #03071680;
  --scrim:       #070c18a6;
}