@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=JetBrains+Mono:wght@500;700&display=swap');

/**
 * KempenOS - Themed Bootstrap 5 & Civic Design Tokens
 * Official Brand Palette: Royal Navy (#202070), Warm Gold (#EEBD00), Crimson Red (#dc2626)
 */

:root {
  /* =========================================================================
     1. BOOTSTRAP 5.3 THEME VARIABLE OVERRIDES
     ========================================================================= */
  --bs-primary: #202070;
  --bs-primary-rgb: 32, 32, 112;
  --bs-primary-text-emphasis: #151550;
  --bs-primary-bg-subtle: #edeef8;
  --bs-primary-border-subtle: #c7c9e8;

  --bs-secondary: #64748b;
  --bs-secondary-rgb: 100, 116, 139;
  --bs-secondary-text-emphasis: #334155;
  --bs-secondary-bg-subtle: #f1f5f9;
  --bs-secondary-border-subtle: #cbd5e1;

  --bs-warning: #EEBD00;
  --bs-warning-rgb: 238, 189, 0;
  --bs-warning-text-emphasis: #78350f;
  --bs-warning-bg-subtle: #fffdeb;
  --bs-warning-border-subtle: #fde68a;

  --bs-danger: #dc2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-danger-text-emphasis: #991b1b;
  --bs-danger-bg-subtle: #fef2f2;
  --bs-danger-border-subtle: #fecaca;

  --bs-success: #10B981;
  --bs-success-rgb: 16, 185, 129;
  --bs-success-text-emphasis: #065f46;
  --bs-success-bg-subtle: #ecfdf5;
  --bs-success-border-subtle: #a7f3d0;

  --bs-info: #0284c7;
  --bs-info-rgb: 2, 132, 199;
  --bs-info-text-emphasis: #075985;
  --bs-info-bg-subtle: #f0f9ff;
  --bs-info-border-subtle: #bae6fd;

  --bs-light: #f8fafc;
  --bs-light-rgb: 248, 250, 252;
  --bs-dark: #0e1b38;
  --bs-dark-rgb: 14, 27, 56;

  --bs-body-bg: #f8fafc;
  --bs-body-color: #0f172a;
  --bs-body-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bs-body-font-size: 0.9375rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;

  --bs-border-radius: 12px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 16px;
  --bs-border-radius-xl: 20px;
  --bs-border-radius-2xl: 24px;
  --bs-border-radius-pill: 9999px;

  /* =========================================================================
     2. CAMPAIGN / BERSAMA CUSTOM TOKENS
     ========================================================================= */
  --bg-dark: #202070;
  --bg-darker: #151550;
  --surface-glass: #ffffff;
  --border-glass: rgba(32, 32, 112, 0.12);

  --accent-gold: #202070;
  --accent-gold-light: #151550;
  --accent-yellow: #EEBD00;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-main: #0f172a;
  --text-white: #ffffff;

  --bersama-gold: #EEBD00;
  --bersama-gold-hover: #d9ab00;
  --bersama-gold-dark: #202070;
  --bersama-gold-light: #FFFDEE;
  --bersama-gold-subtle: rgba(238, 189, 0, 0.18);

  --civic-navy: #202070;
  --civic-navy-dark: #151550;
  --civic-navy-light: #2c2c8c;
  --civic-navy-subtle: rgba(32, 32, 112, 0.06);

  --ph-red: #dc2626;
  --ph-red-light: #fee2e2;
  --bn-blue: #1d4ed8;
  --bn-blue-light: #dbeafe;
  --pn-teal: #0284c7;
  --pn-teal-light: #e0f2fe;

  --bg-app: #f8fafc;
  --bg-card: #ffffff;
  --border-card: #e2e8f0;
  --border-card-subtle: rgba(32, 32, 112, 0.08);

  --font-heading: 'Fraunces', 'Arial Black', -apple-system, sans-serif;
  --font-body: 'DM Sans', 'Arial', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --shadow-card: 0 4px 16px -2px rgba(15, 23, 42, 0.08);

  --touch-target-min: 44px;
  --bottom-nav-height: 60px;
}