/* ============================================================
   Sitebuilder Design Tokens — SINGLE SOURCE OF TRUTH.
   Imported by css/style.css (public) and admin/css/admin.css (admin).
   See DESIGN-RULEBOOK.md, Part 2.

   Rules:
   - Do NOT declare design values anywhere else (no other :root, no
     inline <style> redefining these). Add new tokens HERE.
   - The per-site brand colour + layout theme are still injected at
     runtime by theme-styles.php; those override the defaults below
     via the cascade (they load after the stylesheets). The values
     here are the BASE/fallback layer.
   ============================================================ */

:root {
  /* --- Brand (per-site themeable; overridden at runtime by theme-styles.php) --- */
  --color-primary: #1a5276;
  --color-primary-light: #2980b9;   /* legacy name, in use — kept */
  --color-primary-strong: var(--color-primary-light); /* rulebook name; tracks the per-site theme (-light is overridden at runtime) */
  --color-accent: #3498db;
  --color-secondary: #5d6d7e;

  /* --- Semantic --- */
  --color-success: #27ae60;
  --color-danger: #e74c3c;
  --color-warning: #f39c12;
  --color-info: #2980b9;

  /* --- Base neutrals (preserved from the old style.css :root) --- */
  --color-bg: #f8f9fa;
  --color-white: #ffffff;
  --color-text: #2c3e50;
  --color-text-light: #7f8c8d;
  --color-border: #e0e0e0;

  /* Previously consumed but never declared — declared here at their existing
     inline-fallback values (behaviour-neutral). NOTE: --accent-color (used in
     cookie-consent.php) looks like a typo for --color-accent; left at its old
     fallback for now, flagged for a later phase. */
  --color-light: #f5f5f5;
  --accent-color: #27ae60;

  /* --- Neutral ramp (NEW — additive, not yet consumed) --- */
  --gray-50:  #f8f9fa;
  --gray-100: #f1f3f5;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #868e96;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #212529;

  /* --- Type scale (NEW — additive) --- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.5rem;

  /* --- Spacing scale (NEW — additive) --- */
  --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: 4rem;

  /* --- Radius --- */
  --radius: 8px;        /* legacy name, in use */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* --- Elevation --- */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);    /* in use */
  --shadow-md: 0 4px 12px rgba(0,0,0,0.15);  /* in use */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-3: 0 6px 18px rgba(0,0,0,0.12);
  --shadow-4: 0 12px 32px rgba(0,0,0,0.18);

  /* --- Layout / motion --- */
  --max-width: 1200px;
  --transition: all 0.3s ease;

  /* --- Static fallbacks for runtime-injected theme tokens ---
     theme-styles.php overrides these on public pages; declared here so they
     always resolve (and so any standalone context has a sane base). Values
     mirror the default 'standard' layout theme + ocean colours. */
  --hero-overlay-start: rgba(26, 82, 118, 0.7);
  --hero-overlay-end:   rgba(26, 82, 118, 0.8);
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --content-max-width: 800px;
  --card-radius: 12px;
  --card-shadow: 0 2px 10px rgba(0,0,0,0.08);
  --card-border: none;
  --section-padding: 60px;
  --card-padding: 30px;
  --hero-height: 50vh;
  --hero-text-align: center;

  /* --- Legacy admin aliases ---
     Verbatim values from the old admin.css :root so existing var(--admin-*)
     rules keep working unchanged. Migrate these to the canonical tokens above
     per-file as each admin file is touched (rulebook grandfathering). */
  --admin-primary: #1a5276;
  --admin-secondary: #2980b9;
  --admin-bg: #f5f6fa;
  --admin-sidebar: #2c3e50;
  --admin-white: #ffffff;
  --admin-text: #2c3e50;
  --admin-text-light: #7f8c8d;
  --admin-border: #e0e0e0;
  --admin-success: #27ae60;
  --admin-danger: #e74c3c;
  --admin-warning: #f39c12;
  --admin-radius: 8px;
  --admin-shadow: 0 2px 10px rgba(0,0,0,0.1);

  /* Callout/notice tints (info/success/danger/warning) — light base; dark variants
     below. Used by admin notice boxes so they recolor in dark mode instead of
     staying light. Text inside inherits --admin-text (or the alert-* overrides). */
  --tint-info-bg: #e8f4fd;
  --tint-success-bg: #d4edda;
  --tint-danger-bg: #f8d7da;
  --tint-warning-bg: #fff3cd;
}

/* --- Admin dark mode (opt-in, admin-only) ---
   Activated by the admin theme toggle, which sets data-admin-theme="dark" on
   <html> (persisted in localStorage, defaults to the OS preference). Scoped so
   it can NEVER affect generated public pages (they never set the attribute).
   Overrides only the admin surface/neutral tokens + a lighter accent for
   contrast; brand hues stay recognisable. Pages that still hardcode colours in
   per-page inline <style> need tokenising before they fully follow this. */
html[data-admin-theme="dark"] {
  color-scheme: dark;
  --admin-bg: #15171c;
  --admin-white: #20242b;       /* card / raised surface */
  --admin-text: #e6e8eb;
  --admin-text-light: #9aa3ad;
  --admin-border: #343a42;
  --admin-sidebar: #101216;
  --admin-shadow: 0 2px 12px rgba(0,0,0,0.55);
  --admin-primary: #2f6fb0;     /* lifted for contrast on dark */
  --admin-secondary: #4a90d9;
  --color-primary: #5fa8ef;     /* admin-only accent (public re-overrides at runtime) */
  --color-primary-strong: #7cb9f2;
  --color-text: #e6e8eb;
  --color-border: #343a42;
  --shadow-2: 0 2px 8px rgba(0,0,0,0.5);
  --shadow-3: 0 8px 20px rgba(0,0,0,0.55);
  --shadow-4: 0 14px 36px rgba(0,0,0,0.65);
  /* Muted callout tints for dark mode (text inside stays light via --admin-text) */
  --tint-info-bg: #15323f;
  --tint-success-bg: #18301e;
  --tint-danger-bg: #3a1b1e;
  --tint-warning-bg: #38300f;
}