/* SEVERITY5 design tokens — the single place brand identity lives.
   Rebrand or restyle by editing this file only. Dark is the default,
   matching the existing admin app; a light block is provided below. */

:root {
    color-scheme: dark;

    /* Brand — SEVERITY5 red/teal (logo + marketing --color-accent) */
    --s5-color-primary: #ff2e3d;
    --s5-color-primary-strong: #d9202f;
    --s5-color-accent: #19d3c5;
    --s5-color-warm: #ff8a5c;
    --s5-color-gold: #ffb800;
    --s5-grad-primary: linear-gradient(135deg, #ff2e3d 0%, #19d3c5 100%);

    /* Surfaces */
    --s5-bg: #0a0b10;
    --s5-bg-secondary: #0f1119;
    --s5-surface: #12141e;
    --s5-surface-muted: #171a27;
    --s5-border: #232738;

    /* Text */
    --s5-text: #e7e9f3;
    --s5-text-muted: #80859b;
    --s5-text-on-primary: #ffffff;

    /* Status — danger is deliberately NOT brand red (destructive ≠ primary) */
    --s5-success: #2fbf71;
    --s5-warning: #ffb800;
    --s5-danger: #ff5c7a;
    --s5-info: #19d3c5;

    /* Shape */
    /* Shell chrome height. Declared rather than left to a fallback so a page doing
       calc(100vh - var(--s5-header-h)) tracks the real header instead of a guess. */
    --s5-header-h: 56px;

    --s5-radius-sm: 6px;
    --s5-radius: 10px;
    --s5-radius-lg: 14px;

    /* Spacing scale */
    --s5-space-1: 4px;
    --s5-space-2: 8px;
    --s5-space-3: 12px;
    --s5-space-4: 16px;
    --s5-space-5: 24px;
    --s5-space-6: 40px;

    /* Type */
    /* The emoji families at the tail are load-bearing, not decoration. A stack that ends at
       "sans-serif" leaves emoji to the platform's last-resort font: iOS and desktop quietly
       substitute a colour emoji font, but Android WebView — which is what the field app renders
       in — falls back to a monochrome or missing glyph, so the app looks broken on exactly the
       devices the techs carry. Naming the families explicitly is the fix, and it costs nothing on
       platforms that were already getting it right. Emoji appear in real DATA here, not just in
       chrome (stock locations like "🏠 Jobsite"), so this is not a cosmetic concern. */
    --s5-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
    --s5-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace,
        "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

    /* For anywhere emoji must render standalone (map pin rasterisation, badges). */
    --s5-font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;

    /* Elevation */
    --s5-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);

    /* Field app — verbatim from the iOS app's Theme.swift */
    --ios-bg-deep: #0a0b10;
    --ios-surface: #12141e;
    --ios-surface-muted: #181b27;
    --ios-surface-hi: #1f2230;
    --ios-line-soft: #242736;
    --ios-line-strong: #333646;
    --ios-ink: #e7e9f3;
    --ios-ink-soft: #b9bccd;
    --ios-ink-muted: #80859b;
    --ios-brand: #19d3c5;
    --ios-brand-deep: #12b8ac;
    --ios-ok: #3ecf8e;
    --ios-warn: #f3b851;
    --ios-urgent: #e8707a;
    --ios-info: #60a9ff;
    --ios-purple: #7c5cff;

    /* Field app job detail — ContentView.swift legacy palette */
    --ios-accent-red: #dc2626;
    --ios-card-bg: #1a1a1c;
    --ios-success: #21bf63;
    --ios-warning-yellow: #f3c40f;
    --ios-phase-blue: #4085f5;
    --ios-phase-purple: #af52de;
}

:root[data-theme="light"] {
    color-scheme: light;

    --s5-bg: #f6f7fb;
    --s5-bg-secondary: #eef0f7;
    --s5-surface: #ffffff;
    --s5-surface-muted: #f1f2f8;
    --s5-border: #dfe2ee;

    --s5-text: #171a27;
    --s5-text-muted: #5d6275;

    --s5-shadow: 0 4px 24px rgba(23, 26, 39, 0.08);
}