/*
 * css/tokens.css
 *
 * Design system custom properties (CSS variables).
 * Matches the Guardian mobile app's light theme for visual consistency.
 * All other stylesheets reference these tokens.
 */

:root {
  /* Backgrounds (light theme matching app) */
  --bg-base:      #F2F2F2;
  --bg-surface:   #FFFFFF;
  --bg-card:      #FFFFFF;
  --bg-elevated:  #EFEFEF;
  --bg-hover:     #E8E8E8;

  /* Borders */
  --border:       #E0E0E0;
  --border-light: #EEEEEE;

  /* Brand / accent (app blue) */
  --primary:      #3F51B5;
  --primary-dim:  rgba(63, 81, 181, 0.12);
  --primary-glow: rgba(63, 81, 181, 0.20);
  --accent:       #2196F3;

  /* Semantic status (app colors) */
  --success:      #4CAF50;
  --success-dim:  rgba(76, 175, 80, 0.12);
  --warning:      #FF9800;
  --warning-dim:  rgba(255, 152, 0, 0.12);
  --danger:       #E57373;
  --danger-dim:   rgba(229, 115, 115, 0.15);
  --outside:      #FB923C;
  --outside-dim:  rgba(251, 146, 60, 0.12);

  /* Role badges (app style) */
  --admin-bg:     #E57373;
  --staff-bg:     #B0BEC5;
  --badge-purple: #7B4B9E;

  /* Typography (dark text on light bg) */
  --text:         #212121;
  --text-muted:   #757575;
  --text-faint:   #9E9E9E;

  /* Structural */
  --sidebar-w:    220px;
  --radius:       8px;
  --radius-lg:    12px;
  --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.08);

  /* Bottom nav (app dark bar) */
  --nav-bg:       #303030;
  --nav-active:   rgba(33, 150, 243, 0.25);

  /* Font families */
  --font-ui:      'Inter', 'Roboto', sans-serif;
  --font-head:    'Sora', 'Roboto', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

/* Global reset and base styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #root {
  height: 100%;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
}

/* Thin scrollbar matching light theme */
::-webkit-scrollbar              { width: 6px; height: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: #BDBDBD; border-radius: 3px; }

/* Keyframe animations referenced by multiple components */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}