/* =============================================================================
   BARANGAY CULIAT ERS - Design System Variables
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Merriweather:wght@700;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ===== FONTS ===== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Merriweather', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ===== PRIMARY COLORS (HSL) ===== */
  /* Primary = deep navy/blue hsl(221 80% 22%) — government authority */
  --primary: hsl(221 80% 22%);
  --primary-dark: hsl(221 80% 15%);
  --primary-light: hsl(221 80% 30%);
  --primary-foreground: hsl(0 0% 100%);
  --navy: hsl(221 80% 22%);
  --navy-dark: hsl(221 80% 15%);
  --white: hsl(0 0% 100%);

  /* Accent = emergency red hsl(0 83% 44%) — CTAs, hotlines */
  --accent: hsl(0 83% 44%);
  --accent-dark: hsl(0 83% 35%);
  --accent-light: hsl(0 83% 55%);
  --accent-foreground: hsl(0 0% 100%);
  --red: hsl(0 83% 44%);
  --red-dark: hsl(0 83% 35%);

  /* Semantic aliases */
  --danger: hsl(0 83% 44%);
  --warning: hsl(38 92% 50%);
  --success: hsl(142 71% 35%);
  --info: hsl(221 80% 22%);

  /* Gold = hsl(46 96% 50%) — Philippine flag gold */
  --gold: hsl(46 96% 50%);
  --gold-light: hsl(46 96% 60%);
  --gold-dark: hsl(46 96% 40%);
  --gold-foreground: hsl(221 80% 15%);

  /* Philippine Flag Colors (exact) */
  --flag-blue: #0038A8;
  --flag-gold: #FCD116;
  --flag-red: #CE1126;

  /* ===== SEMANTIC COLOR SYSTEM ===== */
  --sem-critical: var(--accent);
  --sem-critical-rgb: 220, 38, 38;
  --sem-critical-bg: hsl(0 83% 44% / 0.08);
  --sem-critical-border: hsl(0 83% 44% / 0.2);
  --sem-warning: hsl(38 92% 50%);
  --sem-warning-bg: hsl(38 92% 50% / 0.08);
  --sem-warning-border: hsl(38 92% 50% / 0.2);
  --sem-resolved: hsl(142 71% 35%);
  --sem-resolved-bg: hsl(142 71% 35% / 0.08);
  --sem-resolved-border: hsl(142 71% 35% / 0.2);
  --sem-info: var(--primary);
  --sem-info-bg: hsl(221 80% 22% / 0.08);
  --sem-info-border: hsl(221 80% 22% / 0.2);

  /* ===== NEUTRALS ===== */
  --background: hsl(220 20% 98%);
  --surface: hsl(0 0% 100%);
  --text: hsl(221 80% 10%);
  --text-secondary: hsl(221 40% 35%);
  --text-muted: hsl(221 20% 55%);
  --border: hsl(221 30% 88%);
  --border-light: hsl(221 30% 94%);

  /* Grays */
  --gray-50: hsl(220 20% 98%);
  --gray-100: hsl(220 20% 96%);
  --gray-200: hsl(220 20% 90%);
  --gray-300: hsl(220 15% 82%);
  --gray-400: hsl(220 10% 65%);
  --gray-500: hsl(220 10% 50%);
  --gray-600: hsl(220 10% 40%);
  --gray-700: hsl(220 15% 30%);
  --gray-800: hsl(221 20% 20%);
  --gray-900: hsl(221 80% 10%);

  /* ===== TYPOGRAPHY SCALE ===== */
  --text-display: clamp(1.75rem, 4vw, 2.5rem);
  --text-h1: clamp(1.5rem, 3vw, 2rem);
  --text-h2: 1.25rem;
  --text-body: 1rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --text-xl: 1.125rem;
  --text-2xl: 1.375rem;
  --text-3xl: 1.75rem;
  --text-lg: 1rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ===== SPACING (8px grid) ===== */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 0.375rem;   /* 6px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.625rem;   /* 10px */
  --radius-xl: 1rem;       /* 16px */
  --radius-full: 9999px;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 2px hsl(221 80% 10% / 0.05);
  --shadow-md: 0 4px 12px hsl(221 80% 10% / 0.08);
  --shadow-lg: 0 12px 28px hsl(221 80% 10% / 0.1), 0 4px 12px hsl(221 80% 10% / 0.08);
  --shadow-xl: 0 20px 40px hsl(221 80% 10% / 0.12);
  --shadow-focus: 0 0 0 3px hsl(221 80% 22% / 0.35);

  /* ===== COMPONENT TOKENS ===== */
  --card-radius: 0.625rem;
  --card-shadow: 0 4px 12px hsl(221 80% 10% / 0.08);
  --card-shadow-hover: 0 12px 28px hsl(221 80% 10% / 0.1), 0 4px 12px hsl(221 80% 10% / 0.08);
  --btn-height: 48px;

  /* ===== TRANSITIONS ===== */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ===== SIDEBAR ===== */
  --sidebar-width: 280px;
  --sidebar-collapsed: 72px;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --background: hsl(221 80% 8%);
  --surface: hsl(221 80% 10%);
  --text: hsl(220 20% 95%);
  --text-secondary: hsl(220 15% 70%);
  --text-muted: hsl(220 10% 55%);
  --border: hsl(221 30% 25%);
  --border-light: hsl(221 30% 18%);
  --sem-critical-bg: hsl(0 83% 44% / 0.15);
  --sem-warning-bg: hsl(38 92% 50% / 0.15);
  --sem-resolved-bg: hsl(142 71% 35% / 0.15);
  --sem-info-bg: hsl(221 80% 22% / 0.15);
}

/* ===== BASE STYLES ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Font utility classes */
.font-sans { font-family: var(--font-sans); }
.font-serif { font-family: var(--font-serif); }
.font-mono { font-family: var(--font-mono); }

/* Philippine Flag Tricolor Bar */
.tricolor-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--flag-blue) 33%, var(--flag-gold) 33%, var(--flag-red) 33%);
  border: none;
}

/* Focus visible */
:focus-visible {
  outline: 3px solid hsl(46 96% 50% / 0.7);
  outline-offset: 2px;
}

/* Selection */
::selection {
  background: hsl(46 96% 50% / 0.3);
}