/* ============================================
   ICDC Design System — CSS Variables & Theming
   Based on Figma Brand Book (ICDC)
   ============================================ */

/* ── e-Ukraine Font Family ── */
@font-face { font-family: 'e-Ukraine'; src: url('../assets/fonts/e-Ukraine-Thin.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'e-Ukraine'; src: url('../assets/fonts/e-Ukraine-UltraLight.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'e-Ukraine'; src: url('../assets/fonts/e-Ukraine-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'e-Ukraine'; src: url('../assets/fonts/e-Ukraine-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'e-Ukraine'; src: url('../assets/fonts/e-Ukraine-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'e-Ukraine'; src: url('../assets/fonts/e-Ukraine-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'e-UkraineHead'; src: url('../assets/fonts/e-UkraineHead-Thin.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'e-UkraineHead'; src: url('../assets/fonts/e-UkraineHead-UltraLight.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'e-UkraineHead'; src: url('../assets/fonts/e-UkraineHead-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'e-UkraineHead'; src: url('../assets/fonts/e-UkraineHead-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'e-UkraineHead'; src: url('../assets/fonts/e-UkraineHead-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'e-UkraineHead'; src: url('../assets/fonts/e-UkraineHead-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ── Brand Colors — Road / Signage ── */
  --color-brand-yellow: #FFD500;
  --color-brand-yellow-hover: #F0C400;
  --color-brand-navy: #0057B8;
  --color-brand-navy-light: #3D7DD8;
  --color-brand-accent: #0057B8;

  /* Accent palette */
  --color-accent-blue: #0057B8;
  --color-accent-cyan: #3D7DD8;
  --color-accent-violet: #0057B8;
  --color-signal: #FFD500;

  /* Brand gradients */
  --grad-brand: linear-gradient(135deg, #0057B8 0%, #003E85 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(0,87,184,0.14) 0%, rgba(0,87,184,0.08) 100%);
  --grad-signal: linear-gradient(135deg, #FFD500 0%, #FFB800 100%);
  --glow-blue: 0 0 0 1px rgba(0,87,184,0.3), 0 8px 40px rgba(0,87,184,0.22);

  /* ── Spacing Scale ── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 120px;

  /* ── Typography Scale ── */
  --font-family: 'e-Ukraine', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-head: 'e-UkraineHead', 'e-Ukraine', sans-serif;
  --font-size-base: 19;
  --font-size-xs: calc(var(--font-size-base) * 0.75 * 1px);
  --font-size-sm: calc(var(--font-size-base) * 0.875 * 1px);
  --font-size-base-px: calc(var(--font-size-base) * 1px);
  --font-size-md: calc(var(--font-size-base) * 1.125 * 1px);
  --font-size-lg: calc(var(--font-size-base) * 1.25 * 1px);
  --font-size-xl: calc(var(--font-size-base) * 1.5 * 1px);
  --font-size-2xl: calc(var(--font-size-base) * 2 * 1px);
  --font-size-3xl: calc(var(--font-size-base) * 2.5 * 1px);
  --font-size-4xl: calc(var(--font-size-base) * 3 * 1px);
  --font-size-stat: calc(var(--font-size-base) * 3.5 * 1px);

  /* ── Font Weights ── */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ── Line Heights ── */
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* ── Border Radius ── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);

  /* ── Layout ── */
  --max-width: 1440px;
  --content-width: 1200px;
  --header-height: 100px;
  --sidebar-padding: 32px;

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* ── Liquid Glass ── */
  --glass-blur: 24px;
  --glass-border-opacity: 0.12;
  --glass-bg-opacity: 0.06;
}

/* ============================================
   Dark Theme (Default)
   ============================================ */
[data-theme="dark"],
:root {
  --color-bg-primary: #0E1114;
  --color-bg-secondary: #14181D;
  --color-bg-tertiary: #1B2027;
  --color-bg-elevated: #222932;

  --color-text-primary: #F2F4F6;
  --color-text-secondary: #ABB4BE;
  --color-text-tertiary: #6E7883;
  --color-text-inverse: #0E1114;

  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-border-interactive: rgba(61, 125, 216, 0.5);

  /* Glass specific — translucent for true liquid glass */
  --glass-bg: rgba(255, 255, 255, 0.055);
  --glass-bg-hover: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-border-hover: rgba(255, 255, 255, 0.24);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --glass-tint: rgba(0, 87, 184, 0.06);

  /* Header/Footer */
  --color-header-bg: #14181D;
  --color-footer-bg: #14181D;

  /* Cards */
  --color-card-bg: rgba(255, 255, 255, 0.03);
  --color-card-border: rgba(255, 255, 255, 0.06);
  --color-card-hover-bg: rgba(255, 255, 255, 0.06);

  /* Inputs */
  --color-input-bg: rgba(255, 255, 255, 0.04);
  --color-input-border: rgba(255, 255, 255, 0.12);
  --color-input-focus-border: var(--color-brand-yellow);
  --color-input-error-border: #EF4444;
  --color-input-placeholder: #6B7280;

  /* Overlay */
  --color-overlay: rgba(0, 0, 0, 0.6);
}

/* ============================================
   Light Theme
   ============================================ */
[data-theme="light"] {
  --color-bg-primary: #D9E0E7;
  --color-bg-secondary: #E7EBEF;
  --color-bg-tertiary: #CBD4DC;
  --color-bg-elevated: #F0F3F5;

  --color-text-primary: #10151B;
  --color-text-secondary: #414C58;
  --color-text-tertiary: #76828E;
  --color-text-inverse: #F2F4F6;

  --color-border: rgba(16, 21, 27, 0.10);
  --color-border-strong: rgba(16, 21, 27, 0.2);
  --color-border-interactive: rgba(0, 87, 184, 0.45);

  /* Glass specific — translucent for true liquid glass */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-hover: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-border-hover: rgba(255, 255, 255, 0.9);
  --glass-shadow: 0 8px 32px rgba(16, 24, 34, 0.10);
  --glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --glass-tint: rgba(0, 87, 184, 0.05);

  /* Header/Footer — same dark bg in both themes */
  --color-header-bg: #14181D;
  --color-footer-bg: #14181D;

  /* Cards */
  --color-card-bg: rgba(255, 255, 255, 0.7);
  --color-card-border: rgba(0, 0, 0, 0.06);
  --color-card-hover-bg: rgba(255, 255, 255, 0.9);

  /* Inputs */
  --color-input-bg: rgba(0, 0, 0, 0.03);
  --color-input-border: rgba(0, 0, 0, 0.12);
  --color-input-focus-border: var(--color-brand-navy);
  --color-input-error-border: #DC2626;
  --color-input-placeholder: #9CA3AF;

  /* Overlay */
  --color-overlay: rgba(0, 0, 0, 0.3);
}