/* Design tokens
   Light is the default. Dark only redefines the colour tokens;
   everything else is shared. js/theme.js sets data-theme on <html>.
   Palette: limestone and basalt, with Egyptian blue as the neon. */

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

  /* Colours */
  --color-surface: #f4f1ea; /* limestone */
  --color-surface-raised: #ebe7dd;
  --color-text: #262420; /* warm dark grey */
  --color-text-muted: #6e6a62;
  --color-border: #dcd7cb;
  --color-accent: #2340ff; /* Egyptian blue, the highlight */
  --color-accent-secondary: #14b8a6; /* faience turquoise, decoration only */
  --glow-accent: none; /* neon glow, night only */
  --color-neon: #2340ff; /* title glyphs: Egyptian blue by day */
  --glow-neon: none;

  /* Sky toggle */
  --color-sun: #e8b130;
  --color-moon: #c9a54a;
  --color-pyramid-lit: #dcc595;
  --color-pyramid-shade: #b99a62;
}

/* Night: the party starts. Aubergine dark, hot pink, electric blue, neon green. */
[data-theme="dark"] {
  color-scheme: dark;

  --color-surface: #0e0a14; /* aubergine black */
  --color-surface-raised: #181222;
  --color-text: #f1eaf2;
  --color-text-muted: #9d93a8;
  --color-border: #2c2338;
  --color-accent: #ff4fa3; /* hot pink, the highlight */
  --color-accent-secondary: #5b7cff; /* electric Egyptian blue, decoration */
  --glow-accent: 0 0 0.5em rgb(255 79 163 / 0.6);
  --color-neon: #c8ffdc; /* pale core of a neon green tube */
  --glow-neon:
    0 0 0.05em #fff,
    0 0 0.2em #39ff88,
    0 0 0.5em #39ff88,
    0 0 1.2em rgb(57 255 136 / 0.6);

  --color-pyramid-lit: #1d1628;
  --color-pyramid-shade: #161020;
}

:root {
  /* Typography */
  --font-body: "General Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-header: var(--font-body); /* site title; the glyphs add the Egyptian */
  --font-glyph: "Egyptian Letters", serif; /* small hieroglyphs */
  --font-illustration: "Egyptian", serif; /* framed picture cards */
  --heading-weight: 300;
  --heading-tracking: 0.28em;
  --heading-case: lowercase;

  /* Shapes */
  --radius-box: 0;
  --filter-photo: grayscale(1) contrast(1.2);
}

/* Built from a colour token, so redeclared wherever a theme is set */
:root,
[data-theme] {
  --border-frame: 1px solid var(--color-border);
}