/* ==========================================================================
   Design tokens.

   Theme handling uses the three-state pattern:
     1. bare :root                                  -> light palette (the default)
     2. @media (prefers-color-scheme: dark)
          guarded by :root:not([data-theme="light"]) -> system dark
     3. :root[data-theme="dark"]                     -> explicit user choice wins

   Never give a colour its only definition inside a media query or a
   [data-theme] block: the bare :root block below is the complete light
   palette, the other two only re-point the same names.

   Per-client overrides: theme.js writes --accent / --accent-dark / font
   family vars onto the root element from site.config.json. Anything not
   overridden falls back to the Wrenmoor defaults defined here.
   ========================================================================== */

:root {
  /* --- Brand (overridable per client) ----------------------------------- */
  --accent: var(--accent-light-value, #1F6E63);
  --accent-ink: var(--accent-ink-light-value, #ffffff);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 32%, transparent);

  /* --- Surfaces --------------------------------------------------------- */
  --paper: #FAF7F0;          /* warm off-white page background */
  --surface: #FFFDF8;        /* cards, panel */
  --surface-2: #F3EEE3;      /* insets, spec grid cells */
  --surface-3: #EAE3D5;      /* chips at rest */
  --line: #E1D9C9;
  --line-strong: #CFC4AE;

  /* --- Ink -------------------------------------------------------------- */
  --ink: #23201B;
  --ink-2: #565046;
  --ink-3: #857D6F;
  --ink-invert: #FAF7F0;

  /* --- Status ----------------------------------------------------------- */
  --ok: #2E7D4F;             /* available   - green  */
  --ok-soft: rgba(46, 125, 79, 0.14);
  --warn: #B27714;           /* reserved    - amber  */
  --warn-soft: rgba(178, 119, 20, 0.15);
  --gone: #9B4A42;           /* sold/booked - muted red */
  --gone-soft: rgba(155, 74, 66, 0.14);

  /* --- Map -------------------------------------------------------------- */
  --plot-stroke: rgba(35, 32, 27, 0.55);
  --plot-label: #ffffff;
  --plot-label-shadow: rgba(0, 0, 0, 0.55);
  --dimmed: 0.15;            /* filtered-out plots dim, never hide */
  --map-backdrop: #E7E0D2;

  /* --- Type (overridable per client) ------------------------------------ */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step-0:  clamp(0.94rem, 0.91rem + 0.14vw, 1.02rem);
  --step-1:  clamp(1.10rem, 1.04rem + 0.30vw, 1.28rem);
  --step-2:  clamp(1.34rem, 1.22rem + 0.58vw, 1.72rem);
  --step-3:  clamp(1.62rem, 1.40rem + 1.05vw, 2.30rem);

  /* --- Geometry & depth ------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(35, 32, 27, 0.06), 0 1px 1px rgba(35, 32, 27, 0.04);
  --shadow-2: 0 6px 20px rgba(35, 32, 27, 0.08), 0 2px 6px rgba(35, 32, 27, 0.05);
  --shadow-3: 0 18px 50px rgba(35, 32, 27, 0.18);

  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);

  /* --- Motion ----------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(0.2, 0, 0.1, 1);

  color-scheme: light;
}

/* 2. System dark - only when the user has not explicitly chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent: var(--accent-dark-value, #6FC3B4);
    --accent-ink: var(--accent-ink-dark-value, #10231F);
    --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
    --accent-line: color-mix(in srgb, var(--accent) 34%, transparent);

    --paper: #16150F;
    --surface: #1D1C15;
    --surface-2: #262419;
    --surface-3: #322F22;
    --line: #34311F;
    --line-strong: #4A4632;

    --ink: #F2EEE2;
    --ink-2: #C6BFAD;
    --ink-3: #948C7A;
    --ink-invert: #16150F;

    --ok: #6BBF8A;
    --ok-soft: rgba(107, 191, 138, 0.16);
    --warn: #DCA94B;
    --warn-soft: rgba(220, 169, 75, 0.16);
    --gone: #D2857C;
    --gone-soft: rgba(210, 133, 124, 0.16);

    --plot-stroke: rgba(242, 238, 226, 0.5);
    --plot-label: #F7F3E8;
    --plot-label-shadow: rgba(0, 0, 0, 0.75);
    --map-backdrop: #232116;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.6);

    color-scheme: dark;
  }
}

/* 3. Explicit dark choice - identical body, wins in both directions. */
:root[data-theme="dark"] {
  --accent: var(--accent-dark-value, #6FC3B4);
  --accent-ink: var(--accent-ink-dark-value, #10231F);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 34%, transparent);

  --paper: #16150F;
  --surface: #1D1C15;
  --surface-2: #262419;
  --surface-3: #322F22;
  --line: #34311F;
  --line-strong: #4A4632;

  --ink: #F2EEE2;
  --ink-2: #C6BFAD;
  --ink-3: #948C7A;
  --ink-invert: #16150F;

  --ok: #6BBF8A;
  --ok-soft: rgba(107, 191, 138, 0.16);
  --warn: #DCA94B;
  --warn-soft: rgba(220, 169, 75, 0.16);
  --gone: #D2857C;
  --gone-soft: rgba(210, 133, 124, 0.16);

  --plot-stroke: rgba(242, 238, 226, 0.5);
  --plot-label: #F7F3E8;
  --plot-label-shadow: rgba(0, 0, 0, 0.75);
  --map-backdrop: #232116;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Browsers without color-mix() fall back to the default-brand tints. The
   accent itself still applies everywhere; only these derived tints revert. */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root {
    --accent-soft: rgba(31, 110, 99, 0.12);
    --accent-line: rgba(31, 110, 99, 0.32);
  }
  :root[data-theme="dark"] {
    --accent-soft: rgba(111, 195, 180, 0.14);
    --accent-line: rgba(111, 195, 180, 0.34);
  }
}