/* ─────────────────────────────
   CLIENT THEME: Brand Template
   ─────────────────────────────

   The demo brand instance. Overriding design system tokens
   produces a completely different look and feel; this file is
   the entire visual expression of the Brand Template demo brand.

   Pairs with cms/brands/brand-template/brand.json (admin
   settings: name, font source, footer text).

   The no-JS fallback block at the bottom must mirror the
   [data-theme="dark"] block exactly; drift between them is a
   known failure mode.
   ───────────────────────────── */


:root {

  /* ── Typography ──────────────────────────── */
  --font-primary: "Public Sans", "Helvetica Neue", sans-serif;
  --font-secondary: "Fraunces", Georgia, serif;
  --font-tertiary: "Public Sans", "Helvetica Neue", sans-serif;
  --font-quaternary: "IBM Plex Mono", monospace;
  --font-display: "Fraunces", Georgia, serif;
  --font-playful: "Fraunces", Georgia, serif;
  --font-script: "Fraunces", Georgia, serif;


  /* ── Neutral scale ──────────────────────────
     Warm paper ramp. */
  --neutral-50:  #faf8f3;
  --neutral-100: #f1ece1;
  --neutral-150: #e6dfcf;
  --neutral-200: #d8cfba;
  --neutral-300: #bdb29a;
  --neutral-400: #a2967d;
  --neutral-500: #877c66;
  --neutral-600: #6b6250;
  --neutral-700: #52493c;
  --neutral-800: #3a342b;
  --neutral-900: #26221c;
  --neutral-950: #181511;
  --neutral-990: #0d0b09;


  /* ── Text ────────────────────────────────── */
  --text-primary: #23312b;
  --text-secondary: #5c6b62;
  --text-accent: #175d48;
  --text-link: var(--text-accent);
  --text-inverted: #f6f3ea;


  /* ── Backgrounds ─────────────────────────── */
  --background-primary: #f6f3ea;
  --background-secondary: #ece6d6;


  /* ── Borders ─────────────────────────────── */
  --border-primary: #23312b;
  --border-secondary: #d8cfba;
  --input-border: #bdb29a;


  /* ── Buttons ─────────────────────────────────
     Buttons derive from --text-primary / --text-inverted at
     component scope; they re-skin through those tokens and are
     not a per-theme override surface. */


  /* ── Accent ──────────────────────────────── */
  --status-info: #33658a;
  --input-focus: var(--text-accent);
  --checkbox-selected: #175d48;


  /* ── Selection ───────────────────────────── */
  --selection-text: #f6f3ea;
  --selection-background: #175d48;
}


/* ── Dark mode ─────────────────────────────── */

[data-theme="dark"] {
  --text-primary: #ece7da;
  --text-secondary: #a8a294;
  --text-plain: #f2eee3;
  --text-accent: #7fc4a9;
  --text-link: var(--text-accent);
  --text-inverted: #14201b;

  --background-primary: #14201b;
  --background-secondary: #1c2a24;
  --background-plain: #223129;

  --border-primary: #ece7da;
  --border-secondary: #33453c;
  --input-border: #33453c;

  --status-info: #7fa8c4;
  --input-focus: var(--text-accent);
  --checkbox-selected: #7fc4a9;

  --selection-text: #14201b;
  --selection-background: #7fc4a9;
}


/* ── System preference fallback (no-JS) ───────
   Mirror of [data-theme="dark"] above. Keep in sync. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --text-primary: #ece7da;
    --text-secondary: #a8a294;
    --text-plain: #f2eee3;
    --text-accent: #7fc4a9;
    --text-link: var(--text-accent);
    --text-inverted: #14201b;

    --background-primary: #14201b;
    --background-secondary: #1c2a24;
    --background-plain: #223129;

    --border-primary: #ece7da;
    --border-secondary: #33453c;
    --input-border: #33453c;

    --status-info: #7fa8c4;
    --input-focus: var(--text-accent);
    --checkbox-selected: #7fc4a9;

    --selection-text: #14201b;
    --selection-background: #7fc4a9;
  }
}