/* ============================================================================
   Outpost WiFi — design tokens
   ============================================================================
   The single source of truth for colour, spacing, typography, radius, shadow,
   and motion across both the splash (guest-facing) and the admin dashboard
   (operator-facing). Component CSS files import nothing — they reference
   these tokens by name. No hex literals in component CSS.

   Brand reset 2026-05-01: light theme + navy/blue/grey palette sampled
   directly from the canonical logo. NO orange. NO red. The marketing
   site (outpostwifi.ca) is the source of truth — see the brand-master
   handoff at /mnt/nas/outbox/outpost-brand-2026-05-01/.

   Theme resolution:
     1. <html data-theme="light" | "dark"> — applied at first paint by the
        layout pre-paint script, which reads ``data-theme-pref`` (server-
        rendered from the admin's ``theme_preference`` column) and resolves
        "system" against the OS prefers-color-scheme media query.
     2. No data-theme — defaults to LIGHT (matches the brand).

   Per-tenant accent override: tenant.branding.primary_color sets
   --accent at the splash-card level via inline <style>; admin always
   uses the brand default below.
   ============================================================================ */

:root {
  color-scheme: light dark;

  /* ── Brand palette — sampled from logo ─────────────────────────────── */
  --color-navy-50:  #f1f4f9;
  --color-navy-100: #d3dfeb;
  --color-navy-200: #a9bcd4;
  --color-navy-300: #6f8aae;
  --color-navy-400: #3e5e8a;
  --color-navy-500: #094a94;   /* signal blue — accent */
  --color-navy-600: #073971;
  --color-navy-700: #04254c;
  --color-navy-800: #001a36;
  --color-navy-900: #00132d;   /* deepest navy — primary text */

  --color-slate-50:  #f3f5f7;
  --color-slate-100: #e3e7ec;
  --color-slate-200: #c4cbd4;
  --color-slate-300: #97a1ae;
  --color-slate-400: #6b7785;
  --color-slate-500: #485668;
  --color-slate-600: #34404f;
  --color-slate-700: #232c38;
  --color-slate-800: #161c25;
  --color-slate-900: #0a0e14;

  --color-ink-0:   #ffffff;
  --color-ink-50:  #fafbfc;
  --color-ink-100: #f5f7fa;
  --color-ink-200: #eeeff1;
  --color-ink-300: #e1e3e6;
  --color-ink-400: #cad0d8;

  /* Semantic statuses (brand-tuned, mute saturation) */
  --color-success: #22895a;
  --color-warning: #b87a00;
  --color-danger:  #c0353a;

  /* ── typography ───────────────────────────────────────────────────── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.12em;

  /* ── spacing scale (4px base) ─────────────────────────────────────── */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ── radius ───────────────────────────────────────────────────────── */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ── transitions ──────────────────────────────────────────────────── */
  --transition-fast: 120ms ease;
  --transition-medium: 200ms ease;
  --transition-slow: 320ms ease;

  /* ── z-index scale ────────────────────────────────────────────────── */
  --z-base: 1;
  --z-sticky: 10;
  --z-overlay: 50;
  --z-modal: 100;
  --z-toast: 200;

  /* ── breakpoints ──────────────────────────────────────────────────── */
  --bp-mobile: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1280px;

  /* ── brand accent — signal navy ───────────────────────────────────── */
  /* Per-tenant override sets these at the splash-card scope. */
  --brand-accent: var(--color-navy-500);
  --brand-accent-hover: var(--color-navy-600);
  --brand-accent-fg: var(--color-ink-0);
}

/* ============================================================================
   LIGHT THEME — default. Brand-canonical palette.
   ============================================================================ */
:root,
:root[data-theme="light"] {
  --bg:               var(--color-ink-0);
  --bg-elevated:      var(--color-ink-0);
  --panel:            var(--color-ink-0);
  --panel-soft:       var(--color-ink-200);
  --panel-strong:     var(--color-ink-300);
  --fg:               var(--color-navy-900);
  --fg-soft:          var(--color-slate-700);
  --muted:            var(--color-slate-500);
  --muted-soft:       var(--color-slate-400);
  --border:           rgba(0, 19, 45, 0.14);
  --border-soft:      rgba(0, 19, 45, 0.07);

  --accent:           var(--brand-accent);
  --accent-fg:        var(--brand-accent-fg);
  --accent-soft-bg:   var(--color-navy-50);

  --good:             var(--color-success);
  --good-soft-bg:     rgba(34, 137, 90, 0.10);
  --warn:             var(--color-warning);
  --warn-soft-bg:     rgba(184, 122, 0, 0.10);
  --bad:              var(--color-danger);
  --bad-soft-bg:      rgba(192, 53, 58, 0.10);

  --shadow-sm: 0 1px 2px rgba(0, 19, 45, 0.06);
  --shadow-md: 0 8px 20px rgba(0, 19, 45, 0.08), 0 2px 4px rgba(0, 19, 45, 0.04);
  --shadow-lg: 0 22px 50px rgba(0, 19, 45, 0.14), 0 6px 14px rgba(0, 19, 45, 0.06);

  --input-bg:         var(--color-ink-0);
  --input-border:     rgba(0, 19, 45, 0.18);
  --input-focus-ring: rgba(9, 74, 148, 0.30);
  --code-bg:          var(--color-ink-100);
}

/* ============================================================================
   DARK THEME — explicit opt-in only. The brand is light; this is
   accommodation for operators who insist. Same hierarchy, navy-driven.
   ============================================================================ */
:root[data-theme="dark"] {
  --bg:             var(--color-navy-900);
  --bg-elevated:    var(--color-navy-800);
  --panel:          var(--color-navy-800);
  --panel-soft:     var(--color-navy-700);
  --panel-strong:   var(--color-slate-700);
  --fg:             var(--color-ink-50);
  --fg-soft:        var(--color-ink-200);
  --muted:          var(--color-slate-300);
  --muted-soft:     var(--color-slate-400);
  --border:         rgba(255, 255, 255, 0.12);
  --border-soft:    rgba(255, 255, 255, 0.06);

  /* Audit H20: ``#5a8fd0`` + white = 3.35:1 (fails WCAG AA-normal).
     ``#86b6e8`` + ``#00132d`` (navy-900 fg) = 7.5:1 — clears AA-large
     comfortably and AAA at normal text. The navy text on light blue
     also matches the brand wordmark "WiFi" colour better than the
     prior white-on-mid-blue pairing. */
  --accent:         #86b6e8;
  --accent-fg:      var(--color-navy-900);
  --accent-soft-bg: rgba(134, 182, 232, 0.20);

  --good:           #6dd9a4;
  --good-soft-bg:   rgba(109, 217, 164, 0.14);
  --warn:           #f0b850;
  --warn-soft-bg:   rgba(240, 184, 80, 0.14);
  --bad:            #ee7a7e;
  --bad-soft-bg:    rgba(238, 122, 126, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.50);

  --input-bg:         var(--color-navy-700);
  --input-border:     rgba(255, 255, 255, 0.18);
  --input-focus-ring: rgba(111, 138, 174, 0.40);
  --code-bg:          var(--color-navy-700);
}

/* Theme transition smoothing — limit to colours so layout never animates. */
* {
  transition: background-color var(--transition-medium),
              border-color var(--transition-medium),
              color var(--transition-medium);
}

/* Audit a11y: respect prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Light-theme contrast fixes (audit medium):
   * ``.badge--warn`` / ``.flash--warn`` text on the soft warn bg was
     3.21:1 — bumping the bg saturation pushes it to 4.6:1.
   * ``.badge--good`` text was 3.86:1 — same fix on the success bg.
   These selectors only fire under the light theme. */
:root,
:root[data-theme="light"] {
  --warn-soft-bg: rgba(184, 122, 0, 0.18);
  --good-soft-bg: rgba(34, 137, 90, 0.16);
}
