/* ============================================================
   IMI INTERNATIONAL — CSS CUSTOM PROPERTIES
   Single source of truth. Change colors here, changes everywhere.
   ============================================================ */

:root {

  /* ── Brand Colors ── */
  --teal:          #18AED4;
  --teal-dark:     #0F7EA0;
  --teal-deeper:   #0A5F7A;
  --teal-light:    #EBF8FC;
  --teal-mid:      #C2EAF5;

  --dark:          #0D1B2A;
  --dark-mid:      #162435;
  --charcoal:      #4A5560;
  --charcoal-light:#6B7A87;

  --gold:          #C8933A;
  --gold-light:    #F5E6C8;

  --white:         #FFFFFF;
  --off-white:     #F7FAFB;
  --light-grey:    #F0F4F6;
  --border-color:  #D8E6EC;

  /* ── Semantic Colors ── */
  --success:       #27AE60;
  --success-light: #EAFAF1;
  --warning:       #E67E22;
  --warning-light: #FEF9E7;
  --danger:        #C0392B;
  --danger-light:  #FDEDEC;
  --info:          #2980B9;
  --info-light:    #EBF5FB;

  /* ── Typography ── */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'DM Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:     'Courier New', Courier, monospace;

  --text-primary:  #0D1B2A;
  --text-secondary:#4A5560;
  --text-muted:    #8A9BAA;
  --text-on-dark:  #FFFFFF;
  --text-on-teal:  #FFFFFF;

  /* ── Font Sizes ── */
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.125rem;   /* 18px */
  --fs-lg:   1.25rem;    /* 20px */
  --fs-xl:   1.5rem;     /* 24px */
  --fs-2xl:  2rem;       /* 32px */
  --fs-3xl:  2.5rem;     /* 40px */
  --fs-4xl:  3rem;       /* 48px */
  --fs-5xl:  3.75rem;    /* 60px */

  /* ── Font Weights ── */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   900;

  /* ── Spacing Scale ── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

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

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(13,27,42,0.08);
  --shadow-md:  0 4px 16px rgba(13,27,42,0.10);
  --shadow-lg:  0 8px 32px rgba(13,27,42,0.14);
  --shadow-xl:  0 16px 48px rgba(13,27,42,0.18);
  --shadow-teal:0 8px 32px rgba(24,174,212,0.25);

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

  /* ── Layout ── */
  --container-max:  1280px;
  --container-pad:  clamp(1rem, 4vw, 2rem);
  --nav-height:     72px;
  --topbar-height:  40px;

  /* ── Z-index ── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}