:root {
  /* ── BACKGROUNDS ──────────────────────────────────── */
  --c-bg-0:   #FFFFFF;
  --c-bg-1:   #F8F9FA;
  --c-bg-2:   #F1F3F5;
  --c-bg-3:   #E9ECEF;
  --c-surface:       rgba(0,0,0,0.025);
  --c-surface-mid:   rgba(0,0,0,0.045);
  --c-surface-high:  rgba(0,0,0,0.07);

  /* ── METALLIC / GLASS SURFACE ─────────────────────── */
  --c-metal-1: rgba(255,255,255,0.95);
  --c-metal-2: rgba(248,249,250,0.88);
  --c-glass:   rgba(255,255,255,0.82);
  --c-glass-bar: rgba(255,255,255,0.94);

  /* ── TEXT ─────────────────────────────────────────── */
  --c-text:    #1F2933;
  --c-muted:   rgba(31,41,51,0.62);
  --c-muted-2: rgba(31,41,51,0.40);

  /* ── MESEN BRAND COLORS ───────────────────────────── */
  --c-blue:         #16324F;
  --c-blue-deep:    #0E2236;
  --c-blue-mid:     #1E4570;
  --c-blue-light:   #2A5F9E;
  --c-blue-glow:    rgba(22,50,79,0.15);
  --c-blue-subtle:  rgba(22,50,79,0.06);
  --c-blue-light-bg: rgba(22,50,79,0.10);
  --c-blue-line:    rgba(22,50,79,0.22);

  /* ── SILVER SYSTEM ────────────────────────────────── */
  --c-silver:       #C4C9CF;
  --c-silver-deep:  #A0A8B0;
  --c-silver-light: #D8DCE0;
  --c-silver-line:  rgba(196,201,207,0.55);

  /* ── GREY SYSTEM ──────────────────────────────────── */
  --c-grey-1: #E9ECEF;
  --c-grey-2: #DEE2E6;
  --c-grey-3: #CED4DA;

  /* ── CHROME / LINES ───────────────────────────────── */
  --c-chrome-1: rgba(22,50,79,0.90);
  --c-chrome-2: rgba(22,50,79,0.45);
  --c-line:     rgba(0,0,0,0.07);
  --c-line-blue: rgba(22,50,79,0.18);

  /* ── TYPOGRAPHY ───────────────────────────────────── */
  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --text-h1:    clamp(44px, 10vw, 88px);
  --text-h2:    clamp(28px, 6vw, 52px);
  --text-h3:    clamp(18px, 4vw, 28px);
  --text-body:  clamp(15px, 3.8vw, 17px);
  --text-small: clamp(12px, 3vw, 13px);
  --text-micro: 11px;

  /* ── SPACING ──────────────────────────────────────── */
  --space-1:  6px;
  --space-2: 12px;
  --space-3: 20px;
  --space-4: 28px;
  --space-5: 40px;
  --space-6: 56px;
  --space-7: 80px;
  --space-8: 112px;

  --m-pad:   20px;
  --m-gap:   16px;
  --m-block: 72px;

  /* ── RADIUS ───────────────────────────────────────── */
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-large: 18px;
  --radius-pill:  999px;

  /* ── SHADOWS ──────────────────────────────────────── */
  --shadow-lift:  0 4px 20px rgba(0,0,0,0.08);
  --shadow-deep:  0 12px 40px rgba(0,0,0,0.12);
  --shadow-glow:  0 0 0 1px rgba(22,50,79,0.12), 0 0 24px var(--c-blue-glow);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.80);
  --shadow-card:  0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);

  /* ── ANIMATION ────────────────────────────────────── */
  --ease:          cubic-bezier(0.23, 0.44, 0.40, 0.94);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration:      460ms;
  --duration-fast: 220ms;

  /* ── DIVIDER SYSTEM ───────────────────────────────── */
  --divider-blue:   linear-gradient(to right, transparent 0%, var(--c-blue-line) 50%, transparent 100%);
  --divider-subtle: linear-gradient(to right, transparent 0%, var(--c-line) 50%, transparent 100%);
}