/* Global styles — design tokens, reset/base, layout primitives and the rules shared by
   several page types (buttons, section headings, cards, article layout...).
   Phase 2: everything used by only one page type or feature moved out to that
   page/component (verbatim, no rule edited). */

/* ===== Shared design tokens & base ===== */
/* This site is a set of separate HTML documents, not a single-page
     app — clicking a nav link fully unloads the current page and
     loads a new one. Without this, the browser's default behaviour is
     an instant hard cut: the old page (header included) simply
     vanishes and the new one appears already-painted, which is what
     reads as the header/nav "popping". @view-transition{navigation:
     auto} switches every same-origin navigation to a view transition
     instead: the browser holds the old page's rendered frame on
     screen until the new page is actually ready, then transitions
     between them, so there's never a blank/unstyled gap to pop out
     of. Purely progressive enhancement — browsers without support
     (older Firefox/Safari) just navigate normally, exactly as today. */
@view-transition{navigation:auto;}

:root{
    color-scheme:light;
    --accent:#C46A2D;
    --heading:#242424;
    --body:#3F434A;
    --bg:#FCFAF7;
    --surface:#FFFFFF;
    --border:#E8E2D8;
    --nature:#556B4D;
    /* Always-dark, independent of the light/dark toggle below — used by
       panels (Explore, footer, breather strip, article "related" strip)
       that are designed to read as dark regardless of site theme. */
    --panel-dark:#242424;
    --stone:#EDE8DE;
    --bg-translucent:rgba(252,250,247,1);
    --sans:'Satoshi', -apple-system, sans-serif;
    --serif:'Source Serif 4', Georgia, serif;
    /* Places filter dropdown panel — a light tint of --accent, dark
       text. Swapped for a deep tint with white text in dark mode
       below, rather than reusing --surface/--heading, so the open
       list reads as a distinct "orange" panel in both themes rather
       than just another neutral card. */
    --select-panel-bg:#F6DCC6;
    --select-panel-border:#EBC29C;
    --select-option-text:#2B2018;
    --select-option-hover-bg:#EFC7A0;
  }

/* Dark mode — overrides the theme-aware tokens only. --panel-dark,
     --bg-translucent and --accent are deliberately left alone: the
     "always dark" panels shouldn't change, and translucent header/
     caption backgrounds get their own dark value here instead.
     color-scheme:dark is what actually fixes the <select> dropdown
     popup (and any other native form UI) — without it the browser
     keeps rendering that popup with its own light-mode chrome
     (white background, near-black text) no matter what colors this
     stylesheet sets on the page around it. */
:root[data-theme="dark"]{
    color-scheme:dark;
    --heading:#F3EEE4;
    --body:#C7C0B2;
    --bg:#18170F;
    --surface:#221F1B;
    --border:#3A362E;
    --nature:#8CB07B;
    --stone:#221F1A;
    --bg-translucent:rgba(24,23,15,1);
    --select-panel-bg:#5B2E12;
    --select-panel-border:#7A431E;
    --select-option-text:#FFFFFF;
    --select-option-hover-bg:#7A431E;
  }