/* ============================================================================
 * REAL ANGELS — design tokens (Direction: "Ember")
 * Single source of truth. Dark is the PRIMARY theme (app is used at night).
 * Light theme via [data-theme="light"].
 *
 * Handoff notes for build agents:
 * - Android → docs/design-token-map-android.md (Compose ColorScheme/Typography)
 * - iOS     → docs/design-token-map-ios.md (DesignTokens.swift)
 * - Web viewer imports this file directly.
 *
 * Conventions:
 * - FILL colors are hex (#F5A83A). TEXT/ICON colors are rgb() — they carry
 *   different light-mode values to hold WCAG AA on both themes.
 * - Never encode meaning in color alone: --danger/--safe always pair with
 *   an icon + words in the component layer.
 * - --safe (green) is reserved for "safe / resolved". ARMED uses --accent.
 *   Degraded/warning uses --accent hazard treatments; active alert uses --danger.
 * ========================================================================== */

:root {
  /* ------ Surfaces ------ */
  --bg:            #070A1C;   /* page base */
  --bg-top:        #0C1130;   /* top of ambient page gradient */
  --surface:       #0E1434;   /* cards */
  --surface-2:     #131A44;   /* elevated / hover */
  --surface-sheet: #0A0D22;   /* sheets, viewer chrome bars */
  --surface-inset: #0A0F28;   /* ring interiors, wells */
  --scrim:         rgba(4,6,18,0.72);

  /* ------ Lines ------ */
  --border:        rgba(255,255,255,0.07);
  --border-subtle: rgba(255,255,255,0.06);
  --border-track:  rgba(255,255,255,0.08);
  --border-chip:   rgba(255,255,255,0.13);
  --border-strong: rgba(255,255,255,0.14);
  --fill-ghost:    rgba(255,255,255,0.05);  /* chips, keypad keys */

  /* ------ Text (rgb notation — see conventions) ------ */
  --text:       rgb(233,237,248);
  --text-dim:   rgb(152,163,194);
  --text-muted: rgb(94,104,137);

  /* ------ Accent · amber (brand, ARM, armed state) ------ */
  --accent:      #F5A83A;             /* fills */
  --accent-text: rgb(245,168,58);     /* text/icons on dark */
  --accent-dim:  rgba(245,168,58,0.14);
  --on-accent:   #241300;             /* text on amber fills (both themes) */
  --accent-glow: rgba(245,158,11,0.16); /* armed ambient wash */
  --shadow-accent: 0 24px 70px rgba(245,158,11,0.35);

  /* ------ Safe · green (safe / resolved ONLY) ------ */
  --safe:      #3DD68C;
  --safe-text: rgb(61,214,140);
  --safe-dim:  rgba(61,214,140,0.12);

  /* ------ Danger · red (live alert, duress, SOS) ------ */
  --danger:        #F87373;
  --danger-text:   rgb(248,115,115);
  --danger-dim:    rgba(248,115,115,0.12);
  --danger-border: rgba(248,115,115,0.55);
  --danger-ring:   rgba(248,115,115,0.35); /* accuracy circle stroke */
  --danger-fill:   rgba(248,115,115,0.10); /* accuracy circle fill */

  /* ------ Info · blue (neutral informational) ------ */
  --info:      #6E8BFF;
  --info-text: rgb(110,139,255);
  --info-dim:  rgba(110,139,255,0.14);

  /* ------ Hazard (degraded state banner) ------ */
  --hazard-stripe: rgba(36,19,0,0.25); /* over --accent, diagonal stripes */

  /* ------ Map placeholder (until map SDK) ------ */
  --map-bg:      #0B0E19;
  --map-grid:    rgba(255,255,255,0.035);
  --map-road:    rgba(255,255,255,0.052);
  --map-road-2:  rgba(255,255,255,0.046);
  --map-park:    rgba(61,214,140,0.05);
  --map-overlay: rgba(8,11,29,0.8);    /* floating pills on map */
  --map-overlay-border: rgba(255,255,255,0.09);

  /* ------ Avatars (initials chips) ------ */
  --avatar-1-bg: #2A2440;  --avatar-1-text: rgb(201,184,255);
  --avatar-2-bg: #12324A;  --avatar-2-text: rgb(124,200,255);
  --avatar-3-bg: #123A2E;  --avatar-3-text: rgb(92,224,165);

  /* ------ Type · Inter ------ */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* dev/placeholder chrome only */
  --fs-display: 56px;   /* degraded headline */
  --fs-numeral-lg: 92px;/* big countdowns */
  --fs-numeral: 50px;   /* ring countdowns — tabular-nums always */
  --fs-h1: 26px;
  --fs-h2: 22px;
  --fs-title: 17px;     /* card titles */
  --fs-body-lg: 16px;
  --fs-body: 15px;
  --fs-small: 13.5px;
  --fs-caption: 12.5px;
  --fs-micro: 11.5px;   /* NEVER below this */
  --lh-tight: 1.15;
  --lh-body: 1.55;
  --ls-label: 0.12em;   /* letterspaced ALL-CAPS labels */

  /* ------ Spacing (4px base) ------ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-11: 44px; --sp-14: 56px;
  --screen-pad: 20px;   /* horizontal page padding on 412px ref */

  /* ------ Radii ------ */
  --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-pill: 999px;

  /* ------ Elevation ------ */
  --shadow-card: 0 12px 32px rgba(0,0,0,0.35);
  --shadow-pin:  0 2px 12px rgba(0,0,0,0.6); /* map location dot */

  /* ------ Touch targets (stress-state floor, above 48dp/44pt minimum) ------ */
  --hit-min: 56px;       /* every interactive element */
  --hit-primary: 64px;   /* primary buttons */
  --hit-critical: 84px;  /* SOS, "I'm OK" — shaking-hands targets */
  --hit-key: 76px;       /* PIN keypad keys */

  /* ------ Motion ------ */
  --dur-calm: 5s;        /* breathe (disarmed/armed ambient) */
  --dur-alert: 1.6s;     /* ping (live/emergency) */
  --dur-tap: 150ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ============================== LIGHT THEME ============================== */
[data-theme="light"] {
  --bg:            #F4F6FB;
  --bg-top:        #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F1F3FA;
  --surface-sheet: #FFFFFF;
  --surface-inset: #FFFFFF;
  --scrim:         rgba(23,28,51,0.40);

  --border:        rgba(16,24,64,0.10);
  --border-subtle: rgba(16,24,64,0.08);
  --border-track:  rgba(16,24,64,0.10);
  --border-chip:   rgba(16,24,64,0.16);
  --border-strong: rgba(16,24,64,0.18);
  --fill-ghost:    rgba(16,24,64,0.05);

  --text:       rgb(23,28,51);
  --text-dim:   rgb(90,100,133);
  --text-muted: rgb(139,147,173);

  --accent:      #F5A83A;
  --accent-text: rgb(180,83,9);
  --accent-dim:  rgba(180,83,9,0.10);
  --on-accent:   #241300;
  --accent-glow: rgba(245,158,11,0.12);
  --shadow-accent: 0 18px 50px rgba(245,158,11,0.30);

  --safe:      #10B981;
  --safe-text: rgb(4,120,87);
  --safe-dim:  rgba(4,120,87,0.10);

  --danger:        #DC2626;
  --danger-text:   rgb(185,28,28);
  --danger-dim:    rgba(220,38,38,0.08);
  --danger-border: rgba(220,38,38,0.45);
  --danger-ring:   rgba(220,38,38,0.30);
  --danger-fill:   rgba(220,38,38,0.10);

  --info:      #3858DE;
  --info-text: rgb(56,88,222);
  --info-dim:  rgba(56,88,222,0.10);

  --map-bg:      #E9ECF5;
  --map-grid:    rgba(20,30,70,0.06);
  --map-road:    rgba(20,30,70,0.08);
  --map-road-2:  rgba(20,30,70,0.07);
  --map-park:    rgba(16,185,129,0.10);
  --map-overlay: rgba(255,255,255,0.92);
  --map-overlay-border: rgba(16,24,64,0.12);

  --avatar-1-bg: #ECE6FB;  --avatar-1-text: rgb(104,66,196);
  --avatar-2-bg: #E1EFFA;  --avatar-2-text: rgb(11,107,168);
  --avatar-3-bg: #DFF5EA;  --avatar-3-text: rgb(9,121,80);

  --shadow-card: 0 10px 30px rgba(20,30,70,0.10);
  --shadow-pin:  0 2px 12px rgba(20,30,70,0.35);
}

/* Discreet mode (ACTIVE_SESSION_DISCREET) is theme-independent:
 * pure #000000 surface, no accents, no motion, no sound. See mockup 09. */