:root{
  --bg:#100E0C; --bg2:#17140F; --surface:#1C1815; --surface2:#241F1A;
  --fg:#F2EBE1; --fg2:#A2988B; --fg3:#847C72;
  /* Blue, in Apple's register. It is a mid-tone, which the old terracotta
     was not, so it needs splitting in two:

       --accent       text, rules, dots. Changes per theme so it stays
                      readable on its own background.
       --accent-fill  the surface of a filled button. Identical in both
                      themes with white on top, the way Apple's buttons
                      are — a mid blue gives roughly 4.1:1 under black and
                      4.7:1 under white, so neither theme's --bg works as
                      the label colour. Every stop of the gradient clears
                      5:1 against white. */
  --accent:#3B9EFF; --accent-soft:rgba(59,158,255,.12);
  --accent-rgb:59,158,255; --fg-rgb:242,235,225; --bg-rgb:16,14,12;
  --accent-fill:#006AD6; --accent-fill-deep:#0057B8; --accent-fill-fg:#FFFFFF;
  --accent-grad:linear-gradient(135deg,#006AD6 0%,#0060C4 50%,#0057B8 100%);
  --line:rgba(242,235,225,.09); --line2:rgba(242,235,225,.16);
  --shadow-sm:0 2px 8px rgba(0,0,0,.40);
  --shadow-md:0 8px 32px rgba(0,0,0,.55);
  --shadow-lg:0 24px 64px rgba(0,0,0,.65);

  /* The lightbox is always dark, in both themes. These must not flip. */
  --lb-fg:#F2EBE1; --lb-fg-dim:rgba(242,235,225,.62); --lb-accent:#3B9EFF;

  --r-xl:28px; --r-lg:20px; --r-md:14px; --r-sm:10px; --r-pill:999px;

  /* Manrope carries both display and body; Fira Mono carries the small
     detail voice. Renamed from --serif/--sans, which would now lie:
     neither face is a serif, and a misleading token name is a future bug. */
  --display:'Manrope',system-ui,sans-serif;
  --text:'Manrope',system-ui,sans-serif;
  --mono:'Fira Mono','Courier New',monospace;

  --expo:cubic-bezier(.16,1,.3,1);
  --ease:cubic-bezier(.4,0,.2,1);

  --gutter:24px; --maxw:1320px;

  /* Width of the compact nav. Overwritten per page by initNavShrink,
     which measures the bar's real contents so Greek and English labels
     each get a fit. This default only covers the moment before that runs. */
  --nav-w:720px;
}
html.light{
  --bg:#F2EBE1; --bg2:#E9E0D2; --surface:#F7F2EA; --surface2:#EFE7DA;
  --fg:#1A1714; --fg2:#5C5348; --fg3:#71685D;
  /* Only the text accent flips; the button fill stays put on purpose. */
  --accent:#0062CC; --accent-soft:rgba(0,98,204,.10);
  --accent-rgb:0,98,204; --fg-rgb:26,23,20; --bg-rgb:242,235,225;
  --line:rgba(26,23,20,.12); --line2:rgba(26,23,20,.20);
  --shadow-sm:0 2px 8px rgba(26,23,20,.07);
  --shadow-md:0 8px 32px rgba(26,23,20,.10);
  --shadow-lg:0 24px 64px rgba(26,23,20,.14);
}
@media (max-width:560px){
  :root{ --r-xl:22px; --r-lg:16px; --gutter:16px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}