/* ============================================================
   Capitol Buildings — Design Token System
   All design decisions flow from these variables
   ============================================================ */

:root {
  /* ── Brand Colors ───────────────────────────────────────── */
  --cb-primary:        #1B3E6F;   /* deep navy */
  --cb-primary-rgb:    27, 62, 111;
  --cb-primary-light:  #2563A8;   /* medium blue */
  --cb-primary-dark:   #0E2440;   /* very dark navy */
  --cb-primary-hover:  #164f8a;   /* hover state */
  --cb-gold:           #C8A96A;   /* luxury gold accent */
  --cb-gold-dark:      #A88B4F;   /* dark gold */
  --cb-gold-light:     #E8D4A7;   /* pale gold */

  /* ── Neutrals ───────────────────────────────────────────── */
  --cb-dark:           #111827;
  --cb-gray-900:       #1F2937;
  --cb-gray-800:       #2D3748;
  --cb-gray-700:       #374151;
  --cb-gray-600:       #4B5563;
  --cb-gray-500:       #6B7280;
  --cb-gray-400:       #9CA3AF;
  --cb-gray-300:       #D1D5DB;
  --cb-gray-200:       #E5E7EB;
  --cb-gray-100:       #F3F4F6;
  --cb-gray-50:        #F9FAFB;
  --cb-white:          #FFFFFF;

  /* ── Backgrounds ────────────────────────────────────────── */
  --cb-bg:             #FFFFFF;
  --cb-bg-light:       #F8FAFC;
  --cb-bg-section:     #F0F4F8;
  --cb-bg-dark:        #0E2440;

  /* ── Typography ─────────────────────────────────────────── */
  --cb-font-sans:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --cb-font-bold:      'Inter', sans-serif;

  /* Type scale */
  --cb-text-xs:        0.75rem;    /* 12px */
  --cb-text-sm:        0.875rem;   /* 14px */
  --cb-text-base:      1rem;       /* 16px */
  --cb-text-lg:        1.125rem;   /* 18px */
  --cb-text-xl:        1.25rem;    /* 20px */
  --cb-text-2xl:       1.5rem;     /* 24px */
  --cb-text-3xl:       1.875rem;   /* 30px */
  --cb-text-4xl:       2.25rem;    /* 36px */
  --cb-text-5xl:       3rem;       /* 48px */
  --cb-text-6xl:       3.75rem;    /* 60px */

  --cb-leading-tight:  1.25;
  --cb-leading-snug:   1.4;
  --cb-leading-normal: 1.625;
  --cb-leading-relaxed:1.75;

  --cb-font-light:     300;
  --cb-font-normal:    400;
  --cb-font-medium:    500;
  --cb-font-semibold:  600;
  --cb-font-bold-num:  700;
  --cb-font-extrabold: 800;

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

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

  /* ── Shadows ────────────────────────────────────────────── */
  --cb-shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --cb-shadow-sm:  0 2px 8px rgba(0,0,0,0.08);
  --cb-shadow:     0 4px 16px rgba(0,0,0,0.10);
  --cb-shadow-md:  0 8px 28px rgba(0,0,0,0.12);
  --cb-shadow-lg:  0 16px 48px rgba(0,0,0,0.14);
  --cb-shadow-xl:  0 24px 64px rgba(0,0,0,0.18);
  --cb-shadow-primary: 0 8px 24px rgba(27,62,111,0.28);
  --cb-shadow-gold:    0 8px 24px rgba(200,169,106,0.30);

  /* ── Transitions ────────────────────────────────────────── */
  --cb-transition-fast:  all 0.15s ease;
  --cb-transition:       all 0.25s ease;
  --cb-transition-slow:  all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout ─────────────────────────────────────────────── */
  --cb-header-height:     76px;
  --cb-topbar-height:     42px;
  --cb-section-py:        var(--cb-space-20);
  --cb-container-max:     1280px;
  --cb-gutter:            1.5rem;

  /* ── Z-index stack ──────────────────────────────────────── */
  --cb-z-base:    1;
  --cb-z-raised:  10;
  --cb-z-overlay: 900;
  --cb-z-header:  1000;
  --cb-z-modal:   1100;
  --cb-z-toast:   1200;
}