/* ============================================================
   Crown Heritage Bank — Design Tokens
   ============================================================ */
:root {
  /* ── Brand Palette ── */
  --navy:          #0B1F4B;
  --navy-dark:     #071530;
  --navy-mid:      #132960;
  --navy-light:    #1E3A8A;
  --navy-glass:    rgba(11, 31, 75, 0.85);

  --gold:          #C9A84C;
  --gold-light:    #E2C47A;
  --gold-pale:     #F9F3E3;
  --gold-dark:     #A6842A;
  --gold-glass:    rgba(201, 168, 76, 0.15);

  /* ── Status Colors ── */
  --green:         #16A34A;
  --green-light:   #DCFCE7;
  --green-dark:    #15803D;
  --red:           #DC2626;
  --red-light:     #FEE2E2;
  --red-dark:      #B91C1C;
  --amber:         #D97706;
  --amber-light:   #FEF3C7;

  /* ── Neutrals ── */
  --white:         #FFFFFF;
  --bg:            #F4F6FB;
  --bg-card:       #FFFFFF;
  --border:        #E2E8F0;
  --border-dark:   #CBD5E1;
  --text:          #0F172A;
  --text-muted:    #64748B;
  --text-light:    #94A3B8;

  /* ── Sidebar ── */
  --sidebar-bg:    #0B1F4B;
  --sidebar-width: 260px;
  --sidebar-collapsed: 64px;

  /* ── Typography ── */
  --font-sans:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* ── Spacing ── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;

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

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(11, 31, 75, 0.06);
  --shadow-sm:  0 2px 8px rgba(11, 31, 75, 0.08);
  --shadow:     0 4px 20px rgba(11, 31, 75, 0.10);
  --shadow-lg:  0 12px 40px rgba(11, 31, 75, 0.14);
  --shadow-xl:  0 24px 60px rgba(11, 31, 75, 0.18);
  --shadow-gold: 0 4px 20px rgba(201, 168, 76, 0.30);
  --shadow-inset: inset 0 2px 4px rgba(11, 31, 75, 0.08);

  /* ── Transitions ── */
  --transition:      all 0.2s ease;
  --transition-slow: all 0.35s ease;
  --transition-fast: all 0.1s ease;

  /* ── Z-index ── */
  --z-sidebar:   100;
  --z-topbar:    90;
  --z-modal:     200;
  --z-overlay:   190;
  --z-toast:     300;
  --z-dropdown:  150;
}