/* =========================================================================
   Fieldmark theming system
   =========================================================================
   Architecture
   ------------
   Layer 1  ·  :root            Theme-agnostic primitives: type, spacing,
                                radii, motion. Never colors.
   Layer 2  ·  .theme-*         Semantic color tokens. Every theme class
                                defines the SAME token contract, so themes
                                are interchangeable and new ones can be
                                added without touching component CSS.

   The active theme is a single class on <html> (e.g. class="theme-light"),
   shipped in the markup itself — no JavaScript is needed for the initial
   render. JavaScript only *toggles* the class afterwards.

   Adding a theme
   --------------
   1. Copy a .theme-* block below and restyle every token in it.
   2. Register the class name in the toggle (main.js THEMES list).
   3. Run:  python scripts/check_theme_contrast.py
      The checker parses this file and fails if any foreground/background
      pairing drops below WCAG AA (4.5:1 text, 3:1 UI components).
   ========================================================================= */

/* ---- Layer 1 · primitives -------------------------------------------- */

:root {
  /* Typography (local system stacks; nothing is fetched) */
  --font-display: "Palatino Linotype", Palatino, "Iowan Old Style",
                  "Book Antiqua", Georgia, serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
               Arial, sans-serif;
  --font-mono: "Cascadia Code", Consolas, "SF Mono", "Fira Code", monospace;

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --text-hero: clamp(2.75rem, 1.8rem + 4.5vw, 5rem);

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-slow: 700ms;

  /* Layout */
  --content-width: 72rem;
  --header-height: 4.25rem;
}

/* ---- Layer 2 · semantic tokens ---------------------------------------
   Token contract (every theme must define all of these):

   Surfaces   --surface-page       page background
              --surface-raised     cards, panels
              --surface-sunken     wells, code, dropzones
              --surface-overlay    translucent header/scrims
              --accent-subtle      tinted fills behind accent content

   Text       --text-primary       headings, body
              --text-secondary     supporting copy          (AA on all surfaces)
              --text-muted         captions, metadata       (AA on page+raised)
              --text-accent        links, brand text        (AA on page+raised)
              --text-accent-secondary  amber highlight text (AA on page+raised)
              --text-on-accent     text atop --accent fills

   Interactive --accent            primary buttons, meters
               --accent-hover      hover/active state
               --focus-ring        focus outlines           (3:1 on page)

   Feedback   --{success,warning,danger}-text     (AA on own surface + raised)
              --{success,warning,danger}-surface
              --{success,warning,danger}-border

   Lines      --border-subtle      hairlines, dividers
              --border-strong      form controls, outlines  (3:1 on page+raised)

   Depth      --shadow-soft / --shadow-lifted
   Decoration --glow-accent / --glow-warm   (hero gradients, non-text only)
   --------------------------------------------------------------------- */

/* ---- Theme: light · "Meadow" ----------------------------------------- */

.theme-light {
  color-scheme: light;

  --surface-page: #f6f3ea;
  --surface-raised: #ffffff;
  --surface-sunken: #ece7d8;
  --surface-overlay: rgba(246, 243, 234, 0.82);
  --accent-subtle: #dceadf;

  --text-primary: #1e2620;
  --text-secondary: #43503f;
  --text-muted: #5a6653;
  --text-accent: #235f41;
  --text-accent-secondary: #7e5300;
  --text-on-accent: #ffffff;

  --accent: #2c6a47;
  --accent-hover: #225339;
  --focus-ring: #2c6a47;

  --success-text: #1d6b3b;
  --success-surface: #def0e1;
  --success-border: #9ccba8;
  --warning-text: #7c4f00;
  --warning-surface: #f6e9cd;
  --warning-border: #ddb86a;
  --danger-text: #a82a1f;
  --danger-surface: #f9e2dd;
  --danger-border: #e39c90;

  --border-subtle: #ddd7c6;
  --border-strong: #6e7860;

  --shadow-soft: 0 2px 10px rgba(30, 38, 32, 0.07);
  --shadow-lifted: 0 14px 40px rgba(30, 38, 32, 0.14);

  --glow-accent: rgba(44, 106, 71, 0.16);
  --glow-warm: rgba(196, 142, 42, 0.14);
}

/* ---- Theme: dark · "Dusk" -------------------------------------------- */

.theme-dark {
  color-scheme: dark;

  --surface-page: #0f1513;
  --surface-raised: #17201b;
  --surface-sunken: #0a0e0c;
  --surface-overlay: rgba(15, 21, 19, 0.8);
  --accent-subtle: #1d3226;

  --text-primary: #eaf0e9;
  --text-secondary: #becab9;
  --text-muted: #94a28f;
  --text-accent: #8cd6ab;
  --text-accent-secondary: #e3b566;
  --text-on-accent: #08130c;

  --accent: #67c592;
  --accent-hover: #82d8a8;
  --focus-ring: #8cd6ab;

  --success-text: #a4dfb6;
  --success-surface: #16301f;
  --success-border: #2f6b45;
  --warning-text: #e9c27b;
  --warning-surface: #322809;
  --warning-border: #8a6a22;
  --danger-text: #f2a99e;
  --danger-surface: #3a1710;
  --danger-border: #8c3a2e;

  --border-subtle: #273129;
  --border-strong: #6a7a70;

  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-lifted: 0 16px 44px rgba(0, 0, 0, 0.5);

  --glow-accent: rgba(103, 197, 146, 0.12);
  --glow-warm: rgba(227, 181, 102, 0.09);
}