:root {
  /* ── Brand Colors ── */
  --navy:           #0F1F3D;
  --navy-dark:      #091529;
  --navy-light:     #1a3260;
  --gold:           #C9933A;
  --gold-dark:      #a87728;
  --gold-light:     #e0b56a;
  --cream:          #F9F8F5;
  --cream-dark:     #f0ede5;
  --white:          #ffffff;

  /* ── Semantic Text ── */
  --text-dark:      #1a1a2e;
  --text-muted:     #6c757d;
  --border:         rgba(0, 0, 0, 0.08);

  /* ── Shadows ── */
  --shadow:         0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:      0 8px 24px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.06);

  /* ── Layout ── */
  --sidebar-width:  260px;
  --topbar-height:  64px;

  /* ── Typography ── */
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;

  /* ── Border Radius ── */
  --radius-sm:      0.375rem;
  --radius:         0.5rem;
  --radius-md:      0.75rem;
  --radius-lg:      1rem;
  --radius-xl:      1.5rem;
  --radius-pill:    50rem;

  /* ── Sidebar ── */
  --sidebar-bg:           var(--navy);
  --sidebar-text:         rgba(255, 255, 255, 0.85);
  --sidebar-text-muted:   rgba(255, 255, 255, 0.45);
  --sidebar-active-bg:    rgba(201, 147, 58, 0.18);
  --sidebar-active-text:  var(--gold-light);
  --sidebar-hover-bg:     rgba(255, 255, 255, 0.06);

  /* ── Soft Tint Backgrounds ── */
  --blue-soft:    rgba(13, 110, 253, 0.08);
  --gold-soft:    rgba(201, 147, 58, 0.12);
  --green-soft:   rgba(25, 135, 84, 0.08);
  --purple-soft:  rgba(111, 66, 193, 0.08);
  --red-soft:     rgba(220, 53, 69, 0.08);

  /* ── Asset Type Colors ── */
  --photo-color:    #0ea5e9;
  --video-color:    #8b5cf6;
  --document-color: #f97316;
  --audio-color:    #10b981;
}