/* Sidereal — Daybreak: a pale dawn sky, gold for the sacred, and the four
   elements as candy. Vanilla CSS, no framework. */

/* The cascade, in five layers, each a sheet or a set of them:
     reset       reset.css       the browser's defaults, undone
     base        base.css        the page's own manners; font-face.css
     components  the rest        one sheet per thing, named for it
     utilities   utilities.css   single-purpose classes the markup composes
     native      native.css      what the app shows and hides
   A later layer wins over an earlier one whatever the selectors weigh,
   so a component never has to outweigh the base, a utility never a
   component, and the app never the web. Propshaft loads the sheets in
   name order and the underscore keeps this one first, so the order is
   declared before any layer is used — the one place a file's name
   matters, and the same place Fizzy keeps it. */
@layer reset, base, components, utilities, native;

:root {
  --lch-paper: 96.48% 0.0133 290.75;
  --lch-paper-high: 100.00% 0.0000 0.00;
  --lch-ink: 29.45% 0.0573 289.57;
  --lch-ink-dim: 52.94% 0.0670 290.31;
  --lch-gold: 58.37% 0.1116 84.53;
  --lch-gold-bright: 78.21% 0.1003 86.71;
  --lch-gold-dim: 69.87% 0.1021 87.41;
  --lch-line: 90.28% 0.0273 292.74;
  --lch-line-strong: 82.96% 0.0404 291.82;
  --lch-alert: 55.06% 0.1397 22.81;
  --lch-fire: 63.60% 0.1743 34.72;
  --lch-earth: 62.56% 0.1260 139.95;
  --lch-air: 63.04% 0.1265 246.58;
  --lch-water: 56.23% 0.1557 292.65;
  --lch-dawn: 96.15% 0.0329 83.71;
  --lch-wash: 100.00% 0.0000 0.00;
  --lch-halo: 100.00% 0.0000 0.00;
  --lch-frost: 100.00% 0.0000 0.00;
  --lch-veil: 29.45% 0.0573 289.57;
  --lch-sheet-glow: 99.39% 0.0082 91.48;
  --lch-sun-core: 92.89% 0.0606 91.80;

  --paper: oklch(var(--lch-paper));
  --paper-high: oklch(var(--lch-paper-high));
  --ink: oklch(var(--lch-ink));
  --ink-dim: oklch(var(--lch-ink-dim));
  --gold: oklch(var(--lch-gold));
  --gold-bright: oklch(var(--lch-gold-bright));
  --gold-dim: oklch(var(--lch-gold-dim));
  --line: oklch(var(--lch-line));
  --line-strong: oklch(var(--lch-line-strong));
  --alert: oklch(var(--lch-alert));
  --fire: oklch(var(--lch-fire));
  --earth: oklch(var(--lch-earth));
  --air: oklch(var(--lch-air));
  --water: oklch(var(--lch-water));
  --dawn: oklch(var(--lch-dawn));
  --wash: oklch(var(--lch-wash));
  --halo: oklch(var(--lch-halo) / 90%);
  --frost: oklch(var(--lch-frost) / 82%);
  --veil: oklch(var(--lch-veil) / 35%);
  --sheet-glow: oklch(var(--lch-sheet-glow));
  --sun-core: oklch(var(--lch-sun-core));

  --shadow: 0 2px 14px rgba(62, 50, 120, 0.09);
  --halo-glow: 0 1px 4px rgba(255, 255, 255, 0.95), 0 0 10px rgba(255, 255, 255, 0.9), 0 0 18px rgba(243, 242, 252, 0.85);
  --font-display: "Cormorant", Georgia, serif;
  --font-body: "Literata", Georgia, serif;
  --font-ui: "Nunito Sans", ui-sans-serif, system-ui, sans-serif;
  --font-glyph: "Astro Glyphs", "Literata", serif;
  /* A rhythm for the utilities (utilities.css): a block step and an
     inline step, each with a half and a double, and a scale of type.
     Components keep their own measures; these are for markup that
     composes. */
  --block-space: 1rem;
  --block-space-half: calc(var(--block-space) / 2);
  --block-space-double: calc(var(--block-space) * 2);
  --inline-space: 1ch;
  --inline-space-half: calc(var(--inline-space) / 2);
  --inline-space-double: calc(var(--inline-space) * 2);
  --text-x-small: 0.75rem;
  --text-small: 0.85rem;
  --text-normal: 1rem;
  --text-medium: 1.1rem;
  --text-large: 1.5rem;
  --text-x-large: 2.2rem;
  color-scheme: light dark;
  font-size: 16px;
}

/* Twilight: the same meanings after dark. Paper deepens to the night sky
   and ink pales to moonlight; gold keeps its seat as the Seer's voice, and
   the elements hold their hues, lifted just enough to read against the
   dark. The dawn at the top of the page sets into a violet dusk, and the
   sun stays the sun. */
@media (prefers-color-scheme: dark) {
  :root {
    --lch-paper: 22.83% 0.0494 288.93;
    --lch-paper-high: 27.37% 0.0633 289.41;
    --lch-ink: 92.92% 0.0230 294.05;
    --lch-ink-dim: 72.40% 0.0678 290.45;
    --lch-gold: 78.21% 0.1003 86.71;
    --lch-gold-bright: 85.48% 0.0855 88.79;
    --lch-gold-dim: 73.11% 0.0983 86.65;
    --lch-line: 33.79% 0.0724 289.60;
    --lch-line-strong: 42.71% 0.0957 287.86;
    --lch-alert: 71.35% 0.1122 20.23;
    --lch-fire: 71.05% 0.1492 36.47;
    --lch-earth: 73.49% 0.1229 139.57;
    --lch-air: 74.23% 0.1035 243.32;
    --lch-water: 69.85% 0.1284 296.53;
    --lch-dawn: 31.46% 0.0701 291.01;
    --lch-wash: 24.96% 0.0574 288.95;
    --lch-halo: 22.83% 0.0494 288.93;
    --lch-frost: 22.83% 0.0494 288.93;
    --lch-veil: 14.59% 0.0301 289.04;
    --lch-sheet-glow: 30.26% 0.0722 289.19;

    --frost: oklch(var(--lch-frost) / 78%);
    --veil: oklch(var(--lch-veil) / 55%);

    --shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
    --sun-core: #f6e7ba;
    --halo-glow: 0 1px 4px rgba(28, 24, 50, 0.95), 0 0 10px rgba(28, 24, 50, 0.9), 0 0 18px rgba(31, 26, 54, 0.85);
  }
}