/*
   NIBRSAdminApr2026 — Blue Cover Six app
   Copyright (c) 2026 Blue Cover Six LLC / John Molt
   An unlimited license is granted to the Reno Police Department
   and the City of Reno in perpetuity.
*/

/*
   theme.css — design tokens only.

   This file defines the vocabulary: colors, fonts, spacing, radii,
   shadows, transitions. No layout rules, no component rules, no
   element selectors. Retheming the app means changing values here
   only — app.css and component styles read from these tokens.
*/

:root {
    /* ── Core palette ── */
    --black: #0a0a0a;
    --dark: #111111;
    --card: #1a1a1a;
    --card-hover: #222222;
    --border: #2a2a2a;
    --border-bright: #3a3a3a;
    /* ── Accent palette ── */
    --cyan: #4db8e8;
    --cyan-dim: #2a7fa8;
    --orange: #e87d2a;
    --green: #4ae88a;
    --red: #e84a4a;
    --red-bright: #ff6b6b;
    /* ── Text palette ── */
    --white: #e8e8e8;
   --gray:         #b8b8b8;
   --gray-dim:     #9a9a9a;
      /* ── Semantic aliases ──
       Reference these in app.css and components so later retheming
       (say, a lighter grid mode) only requires re-pointing the aliases. */
    --color-bg-page: var(--black);
    --color-bg-chrome: var(--dark);
    --color-bg-surface: var(--card);
    --color-bg-surface-hi: var(--card-hover);
    --color-border: var(--border);
    --color-border-bright: var(--border-bright);
    --color-text: var(--white);
    --color-text-muted: var(--gray);
    --color-text-dim: var(--gray-dim);
    --color-text-accent: var(--cyan);
    --color-accent: var(--cyan);
    --color-accent-dim: var(--cyan-dim);
    --color-warn: var(--orange);
    --color-ok: var(--green);
    --color-danger: var(--red);
    --color-danger-hi: var(--red-bright);
    /* ── Typography ── */
    --font-head: 'Rajdhani', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;
    --font-body: 'Open Sans', sans-serif;
    /* Font sizes used across the shell. Components may override locally. */
    --fs-xs: 9px; /* mono labels, subtitles */
    --fs-sm: 12px;
    --fs-base: 14px; /* default body */
    --fs-md: 16px;
    --fs-lg: 20px;
    --fs-xl: 24px; /* header title mobile */
    --fs-xxl: 28px; /* header title desktop */
    /* Letter spacing — the Rajdhani/Share Tech aesthetic leans on tracking */
    --ls-wide: 2px;
    --ls-wider: 3px;
    /* ── Spacing ── */
    --sp-xs: 4px;
    --sp-sm: 8px;
    --sp-md: 12px;
    --sp-lg: 16px;
    --sp-xl: 24px;
    --sp-xxl: 32px;
    /* ── Radii ── */
    --radius-sm: 2px;
    --radius: 4px; /* default — cards, buttons, inputs */
    --radius-lg: 8px;
    --radius-pill: 999px;
    /* ── Shadows ── */
    --shadow-card: 0 1px 2px rgba(0,0,0,0.6);
    --shadow-elevated: 0 4px 12px rgba(0,0,0,0.7);
    --shadow-modal: 0 8px 32px rgba(0,0,0,0.85);
    --shadow-fab: 0 4px 12px rgba(232,125,42,0.35), 0 2px 4px rgba(0,0,0,0.6);
    /* ── Layout tokens ── */
    --header-height: 60px;
    --content-max: 1400px; /* desktop-first for NIBRS Admin */
    /* ── Transitions ── */
    --t-fast: 0.15s ease;
    --t-standard: 0.2s ease;
    --t-slow: 0.4s ease;
    /* ── Z-index scale ──
       Keep overlay layers explicit so dialogs, FABs, menus, and
       toasts have a clear stacking hierarchy. */
    --z-header: 100;
    --z-fab: 200;
    --z-menu: 300;
    --z-modal-bg: 400;
    --z-modal: 401;
    --z-toast: 500;
    /* ── Force dark mode globally ──
       The app is dark-themed by design; this prevents browser
       dark-mode heuristics from inverting form controls. */
    color-scheme: dark;
}