/* Neighborhood Landscaping — design tokens + @font-face
   This file lives in /public so it is served statically and never
   processed by Vite/Tailwind. It guarantees the :root tokens are
   available before any component CSS loads, avoiding a dev-mode
   flash where scoped styles resolve var() against undefined tokens.

   Two color themes:
     [default, no attribute]        "Classifieds"   off-white + slate-blue
     [data-theme="forest"]           "Forest"        black + deep green
     [data-theme="sunset"]           "Sunset"        deep purple + sunset orange

   Four font options (independent of color theme):
     [default, no attribute]         "Mono"     IBM Plex Mono display + Atkinson body
     [data-font="arial"]             "Arial"    Arial display + body
     [data-font="times"]             "Times"    Times New Roman display + body
     [data-font="garamond"]          "Garamond" Garamond display + body

   The display tokens (--font-display, --font-body, --font-display-tracking,
   --font-display-weight) are re-pointed per font option. Every component
   CSS rule uses var(--font-display) etc., so the whole site flips with no
   rule changes. Tracking is tuned per font: monospace tight, Arial looser,
   serif loosest. */

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Atkinson Hyperlegible");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Atkinson Hyperlegible Bold");
}

/* ============================================================
   Default color theme: "Classifieds"
   Off-white paper ground, warm near-black ink, slate-blue accent.
   ============================================================ */
:root {
  --paper: #fbfaf7;
  --paper-deep: #f3f1ec;
  --plate: #ffffff;
  --ink: #1d1c19;
  --ink-soft: #5c5a52;
  --ink-faint: #8a877d;
  --blue: #2563a6;
  --blue-dark: #1c4d85;
  --blue-soft: #dce8f3;
  --green: #3f7a4a;
  --rule: #d9d6cd;
  --rule-soft: #e7e4db;
  --accent-ring: #2563a6;
  --on-accent: #ffffff;
  --text-base: 1.1875rem;
  --leading-tight: 1.15;
  --leading-copy: 1.6;
  color-scheme: light;
}

/* ============================================================
   Forest color theme: "Forest"
   Near-black ground, deep green accent, off-white text.
   --on-accent is dark text on the brighter green for legibility.
   ============================================================ */
[data-theme="forest"] {
  --paper: #0e1410;
  --paper-deep: #161e18;
  --plate: #1a241d;
  --ink: #e8efe9;
  --ink-soft: #9fb0a4;
  --ink-faint: #6b7d72;
  --blue: #4caf5f;
  --blue-dark: #6bcc7b;
  --blue-soft: #1d2e23;
  --green: #4caf5f;
  --rule: #2a3530;
  --rule-soft: #1f2a24;
  --accent-ring: #4caf5f;
  --on-accent: #0e1410;
  color-scheme: dark;
}

/* ============================================================
   Sunset color theme: "Sunset"
   Deep purple ground, sunset orange accent, off-white text.
   --on-accent is dark text on the brighter orange for legibility.
   ============================================================ */
[data-theme="sunset"] {
  --paper: #801171;
  --paper-deep: #4a1744;
  --plate: #6b2560;
  --ink: #f7f0f6;
  --ink-soft: #d9c2d4;
  --ink-faint: #b08aa8;
  --blue: #ff7a3d;
  --blue-dark: #ff9a66;
  --blue-soft: #7a2f6e;
  --green: #ff7a3d;
  --rule: #7a3a70;
  --rule-soft: #6a2f60;
  --accent-ring: #ff7a3d;
  --on-accent: #1a1226;
  color-scheme: dark;
}

/* ============================================================
   Default font: "Mono"
   IBM Plex Mono display (tight tracking) + Atkinson Hyperlegible body.
   Loaded via Google Fonts link in <head>.
   ============================================================ */
:root {
  --font-display: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas,
    monospace;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  --font-display-tracking: -0.03em;
  --font-display-weight: 700;
  --font-title-tracking: -0.02em;
}

/* ============================================================
   Font option: "Arial"
   Arial for both display and body. Standard system font, no web load.
   ============================================================ */
[data-font="arial"] {
  --font-display: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-body: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-display-tracking: -0.025em;
  --font-display-weight: 700;
  --font-title-tracking: -0.015em;
}

/* ============================================================
   Font option: "Times"
   Times New Roman for both display and body. Standard system serif.
   ============================================================ */
[data-font="times"] {
  --font-display: "Times New Roman", Times, "Source Serif Pro", Georgia, serif;
  --font-body: "Times New Roman", Times, "Source Serif Pro", Georgia, serif;
  --font-display-tracking: -0.02em;
  --font-display-weight: 700;
  --font-title-tracking: -0.01em;
}

/* ============================================================
   Font option: "Garamond"
   Garamond for display and body. Falls back to Georgia/serif on
   systems without Garamond installed. No web font loaded.
   ============================================================ */
[data-font="garamond"] {
  --font-display: Garamond, "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body: Garamond, "EB Garamond", Georgia, "Times New Roman", serif;
  --font-display-tracking: -0.015em;
  --font-display-weight: 700;
  --font-title-tracking: -0.01em;
}