/*
 * ManySpace design tokens: "the plate, under an aurora".
 * The site is a night-sky observatory. The ground is the night (near-black with a faint blue-violet bias, the colour of a
 * dark sky away from towns); text is starlight. Colour comes from what lights a night sky:
 *   cyan   (doubly ionised oxygen, OIII)  - the interactive colour: primary buttons, links, focus, selected controls
 *   violet (nitrogen aurora, 428 nm)      - the current place: selected nav item, counts, highlighted panels
 *   blue   (hot young stars)              - information: neutral notices, hints that explain
 *   green  (oxygen aurora, 558 nm)        - success: solved, unlocked for you, saved
 * Domain hues stay data (always next to a label): Mathematics = emerald, Physics = rose, AI & ML = orchid.
 * Mastery is light itself: a lightness ramp ending in bone (--bone, the starlight the observatory draws planets with).
 * Every pair was checked (WCAG 2): text >= 4.7:1 on every surface, chrome hues >= 4.8:1, button labels >= 5.3:1, both themes.
 * Glass and light (owner, 2026-10, the controls): surfaces are layered fills with an inset top highlight, an inset bottom
 * shade and a soft outer shadow; halos are blurred glows, never outlines. Every rgba, hex and glow colour lives here.
 */
:root {
  color-scheme: dark;
  --font-ui: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Jost", "Albert Sans", system-ui, sans-serif;
  --font-read: "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;

  --bg: #07080d;
  --bg-raised: #0e1018;
  --surface: #151824;
  --surface-2: #1e2231;
  --surface-3: #2b3044;
  --line: #262a3b;           /* hairline dividers between rows; never a box outline */
  --line-strong: #6b7290;    /* the underline of a form control (>= 3:1 on every surface) */
  --text: #f3f4fa;
  --text-2: #c3c6d6;
  --text-3: #969bb2;
  --bone: #f4f4ec;           /* starlight: planets, mastery at 100%, the observatory's light */

  --cyan: #4fdcf0;
  --cyan-text: #6fe3f3;
  --violet: #a99cff;
  --violet-text: #b8adff;
  --blue: #78a9ff;
  --green: #5fe39a;
  --on-hue: #05101a;         /* text on a cyan, violet or green fill */

  --accent: var(--cyan);     /* primary buttons, selected controls */
  --accent-strong: #8aeaf7;
  --accent-ink: var(--on-hue);
  --accent-text: var(--cyan-text); /* links */
  --focus: var(--cyan-text);

  /* data colours: never the only channel, always next to a glyph, a label or a position */
  --dom-mth: #68e099;
  --dom-phy: #ff99c2;
  --dom-aiml: #cc97f3;
  --dom-ent: #969bb2;
  --st-unlocked: #f4f4ec;
  --st-nearly: #c3c6d6;
  --st-locked: #61657a;
  --st-mastered: #f4f4ec;
  --st-due: #f4f4ec;
  --st-overdue: #ff5065;
  --danger: #ff8292;
  --ok: var(--green);

  --m0: #2a2d3a; --m1: #4f5366; --m2: #80849a; --m3: #bcbfcf; --m4: #f4f4ec; /* mastery = how much light: a pure lightness ramp */

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 112px;
  --measure: 66ch;
  --shell: 1180px;
  --shadow-1: 0 12px 32px rgba(0,0,0,.5);
  --ease: cubic-bezier(.2,.7,.2,1);
  --sky: url("/assets/img/sky.webp");
  --sky-scrim: rgba(7, 8, 13, .62);
  --scrim: rgba(3, 5, 3, .7);                /* the dialog backdrop */

  /* Glass: a card is a translucent night panel; a button is a glass fill; a tile is a smaller glass fill. */
  --glass-top: rgba(26, 32, 60, .72);
  --glass-bottom: rgba(14, 18, 36, .72);
  --glass-fill: rgba(22, 28, 54, .62);
  --glass-tile: rgba(20, 26, 50, .56);
  --glass-hi: rgba(255, 255, 255, .13);     /* the inset top highlight */
  --glass-shade: rgba(0, 0, 0, .3);         /* the inset bottom shade */
  --glass-shadow: 0 12px 40px -18px rgba(0, 0, 0, .7);
  --glass-shadow-sm: 0 8px 18px -12px rgba(0, 0, 0, .6);
  /* Halos: blurred glows in the hue that acts or confirms; never a ring. */
  --halo: color-mix(in srgb, var(--cyan) 34%, transparent);
  --halo-strong: color-mix(in srgb, var(--cyan) 56%, transparent);
  /* Display type (headings): the fill runs from --text (top) to --display-low (bottom); the depth is a stepped extrusion in
     --display-shade (a night violet), a faint top edge and a soft glow beneath. */
  --display-low: #bfeff9;
  --display-shade: #2a2466;
  --display-edge: rgba(255, 255, 255, .42);
  --display-glow: color-mix(in srgb, var(--cyan) 30%, transparent);
  /* The lit hull (the primary button): its lit top and its shaded bottom. */
  --lit-hi: #f4fbff;
  --lit-shade: #137f91;
  --lit-top: 42%;          /* how much light the lit hull's top takes (light theme keeps its white label >= 4.5:1) */
  --lit-top-hover: 58%;
  --lit-bottom-hover: 12%;
  /* The star-dust grain of a glass card: ~12 faint points, white at a quarter opacity (dark theme only). */
  --stardust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%23ffffff' opacity='.25'%3E%3Ccircle cx='12' cy='18' r='.8'/%3E%3Ccircle cx='47' cy='96' r='.6'/%3E%3Ccircle cx='88' cy='30' r='.9'/%3E%3Ccircle cx='132' cy='64' r='.6'/%3E%3Ccircle cx='164' cy='22' r='.7'/%3E%3Ccircle cx='20' cy='140' r='.7'/%3E%3Ccircle cx='70' cy='166' r='.8'/%3E%3Ccircle cx='110' cy='128' r='.6'/%3E%3Ccircle cx='150' cy='150' r='.9'/%3E%3Ccircle cx='96' cy='8' r='.5'/%3E%3Ccircle cx='4' cy='70' r='.5'/%3E%3Ccircle cx='176' cy='100' r='.6'/%3E%3Ccircle cx='60' cy='60' r='.5'/%3E%3Ccircle cx='138' cy='110' r='.5'/%3E%3C/g%3E%3C/svg%3E");
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f4f9;
  --bg-raised: #fafbfe;
  --surface: #ffffff;
  --surface-2: #e8eaf3;
  --surface-3: #d8dbe8;
  --line: #d5d8e5;
  --line-strong: #737a96;
  --text: #10121b;
  --text-2: #383c4e;
  --text-3: #565b70;
  --bone: #10121b;
  --cyan: #00768a;
  --cyan-text: #006578;
  --violet: #5a45d6;
  --violet-text: #4f3ac9;
  --blue: #1a4fb3;
  --green: #006b3a;
  --on-hue: #ffffff;
  --accent: var(--cyan);
  --accent-strong: #00606f;
  --accent-ink: var(--on-hue);
  --accent-text: var(--cyan-text);
  --focus: var(--cyan);
  --dom-mth: #006e3b; --dom-phy: #a42c71; --dom-aiml: #7c3fa8; --dom-ent: #565b70;
  --st-unlocked: #10121b; --st-nearly: #383c4e; --st-locked: #84889a; --st-mastered: #10121b; --st-due: #10121b; --st-overdue: #c5002b;
  --danger: #b7162d; --ok: var(--green);
  --m0: #dcdfe9; --m1: #adb1c2; --m2: #7c8196; --m3: #4a4f63; --m4: #10121b;
  --shadow-1: 0 10px 28px rgba(16,18,27,.14);
  --sky: none;
  --sky-scrim: transparent;
  --scrim: rgba(16, 18, 27, .35);
  --glass-top: rgba(255, 255, 255, .84);
  --glass-bottom: rgba(255, 255, 255, .7);
  --glass-fill: rgba(255, 255, 255, .8);
  --glass-tile: rgba(255, 255, 255, .72);
  --glass-hi: rgba(255, 255, 255, .95);
  --glass-shade: rgba(16, 18, 27, .08);
  --glass-shadow: 0 10px 30px -18px rgba(16, 18, 27, .28);
  --glass-shadow-sm: 0 6px 14px -10px rgba(16, 18, 27, .22);
  --halo: color-mix(in srgb, var(--cyan) 16%, transparent);
  --halo-strong: color-mix(in srgb, var(--cyan) 30%, transparent);
  /* Display type: ink fading to a deep violet, a grey-violet extrusion, a white top edge and a violet glow. */
  --display-low: #4a3fb6;
  --display-shade: #c2c6dc;
  --display-edge: rgba(255, 255, 255, .9);
  --display-glow: color-mix(in srgb, var(--violet) 10%, transparent);
  --lit-hi: #ffffff;
  --lit-shade: #005766;
  --lit-top: 12%;          /* how much light the lit hull's top takes (light theme keeps its white label >= 4.5:1) */
  --lit-top-hover: 16%;
  --lit-bottom-hover: 0%;
  --stardust: none;
}

/* A scene that is always night (the observatory, the landing flight): the dark tokens, re-declared for any theme. */
.night, :root[data-theme="light"] .night {
  color-scheme: dark;
  --bg: #07080d;
  --bg-raised: #0e1018;
  --surface: #151824;
  --surface-2: #1e2231;
  --surface-3: #2b3044;
  --line: #262a3b;
  --line-strong: #6b7290;
  --text: #f3f4fa;
  --text-2: #c3c6d6;
  --text-3: #969bb2;
  --bone: #f4f4ec;
  --cyan: #4fdcf0;
  --cyan-text: #6fe3f3;
  --violet: #a99cff;
  --violet-text: #b8adff;
  --blue: #78a9ff;
  --green: #5fe39a;
  --on-hue: #05101a;
  --accent: var(--cyan);
  --accent-strong: #8aeaf7;
  --accent-ink: var(--on-hue);
  --accent-text: var(--cyan-text);
  --focus: var(--cyan-text);
  --dom-mth: #68e099;
  --dom-phy: #ff99c2;
  --dom-aiml: #cc97f3;
  --dom-ent: #969bb2;
  --st-unlocked: #f4f4ec;
  --st-nearly: #c3c6d6;
  --st-locked: #61657a;
  --st-mastered: #f4f4ec;
  --st-due: #f4f4ec;
  --st-overdue: #ff5065;
  --danger: #ff8292;
  --ok: var(--green);
  --m0: #2a2d3a; --m1: #4f5366; --m2: #80849a; --m3: #bcbfcf; --m4: #f4f4ec;
  --shadow-1: 0 12px 32px rgba(0,0,0,.5);
  --scrim: rgba(3, 5, 3, .7);
  --glass-top: rgba(26, 32, 60, .72);
  --glass-bottom: rgba(14, 18, 36, .72);
  --glass-fill: rgba(22, 28, 54, .62);
  --glass-tile: rgba(20, 26, 50, .56);
  --glass-hi: rgba(255, 255, 255, .13);
  --glass-shade: rgba(0, 0, 0, .3);
  --glass-shadow: 0 12px 40px -18px rgba(0, 0, 0, .7);
  --glass-shadow-sm: 0 8px 18px -12px rgba(0, 0, 0, .6);
  --halo: color-mix(in srgb, var(--cyan) 34%, transparent);
  --halo-strong: color-mix(in srgb, var(--cyan) 56%, transparent);
  --display-low: #bfeff9;
  --display-shade: #2a2466;
  --display-edge: rgba(255, 255, 255, .42);
  --display-glow: color-mix(in srgb, var(--cyan) 30%, transparent);
  --lit-hi: #f4fbff;
  --lit-shade: #137f91;
  --lit-top: 42%;          /* how much light the lit hull's top takes (light theme keeps its white label >= 4.5:1) */
  --lit-top-hover: 58%;
  --lit-bottom-hover: 12%;
  --stardust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%23ffffff' opacity='.25'%3E%3Ccircle cx='12' cy='18' r='.8'/%3E%3Ccircle cx='47' cy='96' r='.6'/%3E%3Ccircle cx='88' cy='30' r='.9'/%3E%3Ccircle cx='132' cy='64' r='.6'/%3E%3Ccircle cx='164' cy='22' r='.7'/%3E%3Ccircle cx='20' cy='140' r='.7'/%3E%3Ccircle cx='70' cy='166' r='.8'/%3E%3Ccircle cx='110' cy='128' r='.6'/%3E%3Ccircle cx='150' cy='150' r='.9'/%3E%3Ccircle cx='96' cy='8' r='.5'/%3E%3Ccircle cx='4' cy='70' r='.5'/%3E%3Ccircle cx='176' cy='100' r='.6'/%3E%3Ccircle cx='60' cy='60' r='.5'/%3E%3Ccircle cx='138' cy='110' r='.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* A surface tinted by what it is about: set --tint (a domain hue or a chrome hue) and the fill follows the theme. */
[data-dom="mth"] { --tint: var(--dom-mth); }
[data-dom="phy"] { --tint: var(--dom-phy); }
[data-dom="aiml"] { --tint: var(--dom-aiml); }
[data-dom="ent"] { --tint: var(--dom-ent); }