/* ============================================================
   PM-TOKENS — single source of truth for the app's design tokens
   Loaded by every page BEFORE its inline <style>. Do not redefine
   these in page :root blocks — extend here instead.

   Canon decisions (2026-07-09 unification — see
   docs/design-ux-assessment-2026-07-09.md):
   - neutrals from Gen-2 (carwash/marketing/admin): --dark #1a1a1a,
     --light #F3F4F6 (Gen-1 pages shift imperceptibly)
   - accent green from Gen-1 (index/sales/leave/vml): #10B981 —
     matches the BFB bank color already used in sales
   - error #EF4444 (lighter than brand red so states stay distinct)

   Dark mode (2026-07-10, Batch 5 — see
   docs/superpowers/plans/2026-07-10-batch5-dark-mode.md):
   TWO token tiers.
   - PALETTE tokens (brand + saturated accents: --red, --green,
     --orange, --error, --blue, --purple) are CONSTANT — they read
     the same in both themes (solid fills / brand identity).
   - SEMANTIC tokens (surfaces / text / borders / status pairs) FLIP.
     The OLD names --dark/--light/--white/--grey/--border/--text also
     flip (redefined in the dark blocks) so the hundreds of existing
     var() call sites re-theme for free.
   Precedence: manual (data-theme) beats system (prefers-color-scheme)
   via the :not([data-theme="light"]) guard. See the two dark blocks
   below — KEEP THEM IN SYNC.
   ============================================================ */
:root {
    /* Brand — PALETTE (constant across themes) */
    --red: #E31837;
    --red-dark: #C41530;

    /* Neutrals — SEMANTIC (flip in dark) */
    --dark: #1a1a1a;
    --grey: #6B7280;
    --light: #F3F4F6;
    --border: #E5E7EB;
    --white: #FFFFFF;

    /* Status / accents — PALETTE (constant across themes) */
    --green: #10B981;
    --orange: #F59E0B;
    --error: #EF4444;
    --blue: #3B82F6;
    --purple: #8B5CF6;

    /* Aliases (previously used-but-undefined tokens — index.html used
       --light-border, leave.html used --text; both silently failed) */
    --text: var(--dark);
    --light-border: var(--border);

    /* --- SEMANTIC surfaces / text / lines (NEW — the structural backbone) --- */
    --surface: #F3F4F6;         /* page bg */
    --surface-raised: #FFFFFF;  /* card / modal bg */
    --surface-sunken: #F9FAFB;  /* input / subtle fills */
    --text-2: #6B7280;          /* secondary / grey text */
    --text-3: #9CA3AF;          /* muted / disabled */

    /* --- SEMANTIC status pairs (NEW — bg tint + matching fg) --- */
    --warn-bg: #FEF3C7;    --warn-fg: #92400E;
    --danger-bg: #FEE2E2;  --danger-fg: #991B1B;
    --success-bg: #D1FAE5; --success-fg: #065F46;
    --info-bg: #DBEAFE;    --info-fg: #1D4ED8;
    --violet-bg: #EDE9FE;  --violet-fg: #6D28D9;
    --teal-bg: #CFFAFE;    --teal-fg: #0E7490;

    /* Toast — CONSTANT (never flips; stays a dark chip in both themes) */
    --toast-bg: #1a1a1a;
    --toast-fg: #FFFFFF;

    /* Scales — use these for NEW css instead of magic numbers */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow-card: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-pop: 0 4px 20px rgba(0,0,0,0.08);

    /* Status-bar inset. Use this on ANY position:fixed element anchored to
       the top of the viewport — such elements sit OUTSIDE body's padding-top,
       so without it their controls land under the phone's clock. */
    --pm-safe-top: env(safe-area-inset-top, 0px);
}

/* The APK's WebView can report a 0 inset, so native gets a 36px floor.
   Set by the `native-app` bootstrap script every app page runs in <body>. */
body.native-app {
    --pm-safe-top: max(36px, env(safe-area-inset-top, 36px));
}

/* ============================================================
   DARK THEME OVERRIDES — two blocks with IDENTICAL bodies.
   KEEP THESE TWO BLOCKS IN SYNC (no preprocessor in this repo).
   Only SEMANTIC tokens are redefined; PALETTE accents (--red/--green/
   --orange/--error/--blue/--purple/--red-dark) and --toast-* are NOT
   touched so they stay constant.
   ============================================================ */

/* 1) Manual override — wins even on a light OS */
:root[data-theme="dark"] {
    /* flip the OLD names in place → every existing var() call re-themes */
    --dark: #F3F4F6;
    --grey: #9CA3AF;
    --light: #0F1113;
    --border: #2E3238;
    --white: #1B1E22;
    --text: #F3F4F6;
    --light-border: #2E3238;

    /* new semantic surfaces / text */
    --surface: #0F1113;
    --surface-raised: #1B1E22;
    --surface-sunken: #26292E;
    --text-2: #9CA3AF;
    --text-3: #6B7280;

    /* status pairs invert (dark tint + light text) */
    --warn-bg: #3A2E12;    --warn-fg: #FCD34D;
    --danger-bg: #3A1D1D;  --danger-fg: #FCA5A5;
    --success-bg: #0F2E22; --success-fg: #6EE7B7;
    --info-bg: #16233A;    --info-fg: #93C5FD;
    --violet-bg: #251C3A;  --violet-fg: #C4B5FD;
    --teal-bg: #103038;    --teal-fg: #67E8F9;

    /* deepen shadows on dark */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-pop: 0 8px 28px rgba(0,0,0,0.55);
}

/* 2) System preference — governs only when NO manual light override.
      The :not([data-theme="light"]) guard lets manual-light win over
      system-dark. Body MUST stay identical to block (1). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --dark: #F3F4F6;
        --grey: #9CA3AF;
        --light: #0F1113;
        --border: #2E3238;
        --white: #1B1E22;
        --text: #F3F4F6;
        --light-border: #2E3238;

        --surface: #0F1113;
        --surface-raised: #1B1E22;
        --surface-sunken: #26292E;
        --text-2: #9CA3AF;
        --text-3: #6B7280;

        --warn-bg: #3A2E12;    --warn-fg: #FCD34D;
        --danger-bg: #3A1D1D;  --danger-fg: #FCA5A5;
        --success-bg: #0F2E22; --success-fg: #6EE7B7;
        --info-bg: #16233A;    --info-fg: #93C5FD;
        --violet-bg: #251C3A;  --violet-fg: #C4B5FD;
        --teal-bg: #103038;    --teal-fg: #67E8F9;

        --shadow-card: 0 1px 3px rgba(0,0,0,0.4);
        --shadow-pop: 0 8px 28px rgba(0,0,0,0.55);
    }
}
