/* ==========================================================================
   ESN BELGIUM - DESIGN SYSTEM (PREMIUM, MODERN & CLEAN - ESN GERMANY STYLE)
   ========================================================================== */

@import url('fonts.css');

:root {
  /* Official ESN Visual Identity */
  --esn-cyan: #00aeef;
  --esn-cyan-dark: #008ebf;
  --esn-cyan-light: #f0f9ff;
  --esn-cyan-border: #bae6fd;

  --esn-magenta: #ec008c;
  --esn-magenta-dark: #c80074;
  --esn-magenta-light: #fdf2f8;
  --esn-magenta-border: #fbcfe8;

  --esn-green: #7ac143;
  --esn-green-dark: #5c9930;
  --esn-green-light: #f4fbf0;
  --esn-green-border: #bbf7d0;

  --esn-orange: #f47b20;
  --esn-orange-dark: #d6610c;
  --esn-orange-light: #fff7ed;
  --esn-orange-border: #fed7aa;

  --esn-navy: #1b365d;
  --esn-navy-dark: #0f223d;
  --esn-navy-light: #244473;
  --esn-dark-blue: #002e6c;

  /* Belgian National Colors */
  --belgium-black: #000000;
  --belgium-yellow: #ffd200;
  --belgium-red: #e31b23;

  /* Clean Light Backgrounds (No Dark Mode) */
  --bg-white: #ffffff;
  --bg-light: #f8fafc;
  --bg-subtle: #f1f5f9;
  --bg-card: #ffffff;

  /* Subtle Modern Borders */
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --border-dark: #cbd5e1;

  /* Typography Colors */
  --text-main: #1e293b;
  --text-heading: #0f172a;
  --text-muted: #64748b;
  --text-light: #94a3b8;

  /* Modern Font Family */
  --font-base: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Soft Natural Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 12px 30px -4px rgba(27, 54, 93, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.04);

  /* Rounded Radii */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Layout */
  --container-width: 1180px;
  --header-height: 80px;
}