/*
 * SecurityView Design Tokens
 * ─────────────────────────────────────────────────────────────
 * Single source of truth for all visual constants.
 * To retheme both apps, change values here only.
 * ─────────────────────────────────────────────────────────────
 */

/* ── Brand & Semantic Colors ─────────────────────────────── */
:root {
  /* Primary — iOS blue. Change this one value to retheme. */
  --color-primary:       #007AFF;
  --color-primary-dark:  #0056CC;
  --color-primary-light: rgba(0, 122, 255, 0.12);

  --color-secondary:     #5AC8FA;

  /* Semantic */
  --color-success:       #34C759;
  --color-success-bg:    rgba(52, 199, 89, 0.12);
  --color-warning:       #FF9500;
  --color-warning-bg:    rgba(255, 149, 0, 0.12);
  --color-error:         #FF3B30;
  --color-error-bg:      rgba(255, 59, 48, 0.12);
  --color-info:          #007AFF;
  --color-info-bg:       rgba(0, 122, 255, 0.12);

  /* Severity */
  --color-severity-critical: #FF3B30;
  --color-severity-high:     #FF9500;
  --color-severity-medium:   #FFCC00;
  --color-severity-low:      #34C759;

  /* Trailer / device status */
  --color-status-active:      #34C759;
  --color-status-maintenance: #FF9500;
  --color-status-offline:     #FF3B30;

  /* ── Typography ─────────────────────────────────────────── */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'SF Mono', 'Fira Code', 'Roboto Mono', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  28px;
  --text-3xl:  34px;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --line-height-tight:  1.2;
  --line-height-normal: 1.5;

  /* ── Spacing (8-point grid) ─────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Border Radius ──────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Z-Index Scale ──────────────────────────────────────── */
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sidebar:  200;
  --z-titlebar: 300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Layout Constants ───────────────────────────────────── */
  --sidebar-width:           240px;
  --sidebar-collapsed-width: 64px;
  --title-bar-height:        64px;
  --page-padding:            24px;

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast: 100ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

/* ── Light Theme ────────────────────────────────────────── */
[data-theme="light"] {
  --bg-app:      #F2F2F7;
  --bg-surface:  #FFFFFF;
  --bg-card:     #FFFFFF;
  --bg-sidebar:  #FFFFFF;
  --bg-titlebar: #FFFFFF;
  --bg-input:    #FFFFFF;
  --bg-hover:    #F5F5F7;
  --bg-active:   rgba(0, 122, 255, 0.10);

  --border:    #E5E5EA;
  --separator: #E5E5EA;

  --text-primary:    #1C1C1E;
  --text-secondary:  #6E6E73;
  --text-tertiary:   #8E8E93;
  --text-disabled:   #C7C7CC;
  --text-on-primary: #FFFFFF;

  --nav-text:        #3C3C43;
  --nav-icon:        #6E6E73;
  --nav-active-text: var(--color-primary);
  --nav-active-bg:   rgba(0, 122, 255, 0.10);
  --nav-hover-bg:    #F5F5F7;

  --shadow-sm:      0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:      0 10px 30px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-sidebar: 1px 0 0 var(--border);

  --overlay: rgba(0, 0, 0, 0.40);
}

/* ── Dark Theme ─────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-app:      #000000;
  --bg-surface:  #1C1C1E;
  --bg-card:     #2C2C2E;
  --bg-sidebar:  #1C1C1E;
  --bg-titlebar: #1C1C1E;
  --bg-input:    #2C2C2E;
  --bg-hover:    #3A3A3C;
  --bg-active:   rgba(0, 122, 255, 0.20);

  --border:    #3A3A3C;
  --separator: #3A3A3C;

  --text-primary:    #FFFFFF;
  --text-secondary:  #8E8E93;
  --text-tertiary:   #636366;
  --text-disabled:   #48484A;
  --text-on-primary: #FFFFFF;

  --nav-text:        #EBEBF5;
  --nav-icon:        #8E8E93;
  --nav-active-text: var(--color-primary);
  --nav-active-bg:   rgba(0, 122, 255, 0.20);
  --nav-hover-bg:    #3A3A3C;

  --shadow-sm:      0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
  --shadow-md:      0 4px 12px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.20);
  --shadow-lg:      0 10px 30px rgba(0,0,0,0.50), 0 4px 8px rgba(0,0,0,0.20);
  --shadow-sidebar: 1px 0 0 var(--border);

  --overlay: rgba(0, 0, 0, 0.60);
}