/* =========================================================
   EOS DESIGN TOKENS — STAGE 1 (COLOURS ONLY)
   Centralised colour system
   ========================================================= */

:root {

  /* ======================================================
     BRAND
     ====================================================== */

  --color-primary: #2a90b8;          /* Main EOS blue */
  --color-primary-dark: #0f4b63;     /* Deep navy accent */
  --color-primary-border: #93c7d8;   /* Light blue border */

  --color-accent: #005AAB;           /* Strong header blue */
  --color-accent-dark: #002f67;
  --color-accent-alt: #0076c6;
  --color-accent-light: #0095f6;
  --color-accent-soft: #4a90e2;


  /* ======================================================
     SURFACES / BACKGROUNDS
     ====================================================== */

  --color-bg-page: #f3f4f6;
  --color-bg-surface: #ffffff;
  --color-bg-surface-alt: #f5f5f5;
  --color-bg-soft: #f9f9f9;

  --color-bg-soft-blue: #e9f5ff;
  --color-bg-soft-blue-strong: #cbe6ff;


  /* ======================================================
     TEXT
     ====================================================== */

  --color-text-primary: #333333;
  --color-text-secondary: #555555;
  --color-text-muted: #666666;

  --color-text-inverse: #ffffff;
  --color-black: #000000;


  /* ======================================================
     BORDERS
     ====================================================== */

  --color-border: #cccccc;
  --color-border-light: #dddddd;
  --color-border-soft: #e0e0e0;
  --color-border-strong: #888888;
  --color-border-muted: #aaaaaa;


  /* ======================================================
     STATUS
     ====================================================== */

  --color-success-bg: #f1fff1;
  --color-success-border: #a0d6a0;

  --color-error-bg: #ffe5e5;
  --color-danger: #dc3545;
  --color-danger-dark: #c82333;


  /* ======================================================
     TAG / BADGE TONES
     ====================================================== */

  --color-purple-soft: #e4d8ff;
  --color-purple-soft-strong: #d6c4ff;


  /* ======================================================
     SHADOWS / OVERLAYS
     ====================================================== */

  --shadow-05: rgba(0,0,0,0.05);
  --shadow-10: rgba(0,0,0,0.10);
  --shadow-15: rgba(0,0,0,0.15);
  --shadow-20: rgba(0,0,0,0.20);
  --shadow-30: rgba(0,0,0,0.30);
  --shadow-40: rgba(0,0,0,0.40);

  --overlay-dark: rgba(0,0,0,0.50);

  --glass-white-70: rgba(255,255,255,0.70);
  --glass-white-90: rgba(255,255,255,0.90);
  --glass-panel: rgba(245,245,245,0.90);

  /* ======================================================
     TYPOGRAPHY
     ====================================================== */
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;

  /* ======================================================
     SPACING + SIZING
     ====================================================== */
  --space-0: 0px;
  --space-1px: 1px;
  --space-2px: 2px;
  --space-3px: 3px;
  --space-1: 4px;
  --space-5px: 5px;
  --space-6px: 6px;
  --space-7px: 7px;
  --space-2: 8px;
  --space-9px: 9px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-15px: 15px;
  --space-4: 16px;
  --space-17px: 17px;
  --space-18px: 18px;
  --space-5: 20px;
  --space-22px: 22px;
  --space-23px: 23px;
  --space-6: 24px;
  --space-25px: 25px;
  --space-26px: 26px;
  --space-7: 28px;
  --space-8: 30px;
  --space-35px: 35px;
  --space-10: 40px;
  --space-45px: 45px;
  --space-48px: 48px;
  --space-50px: 50px;
  --space-55px: 55px;
  --space-60px: 60px;
  --space-63px: 63px;
  --space-65px: 65px;
  --space-72px: 72px;
  --space-80px: 80px;
  --space-100px: 100px;
  --space-120px: 120px;
  --space-150px: 150px;
  --space-200px: 200px;

  --radius-xxs: 3px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  --control-height: 40px;
  --control-padding-y: 8px;
  --control-padding-x: 12px;
  --control-margin-y: 8px;

  --page-offset-top: 90px;
  --page-offset-top-mobile: 15px;
  --page-offset-bottom: 16px;
}