/* ── Retirfi Design System — Desktop ──────────────────────────── */
:root {
  /* ── Brand colors ──────────────────────────────────────────── */
  --primary:         #1D3A5C;   /* logo navy */
  --primary-dark:    #142A44;
  --primary-light:   #EBF0F6;
  --primary-muted:   #7A9BBF;

  /* ── Semantic ───────────────────────────────────────────────── */
  --green:           #4A6B3F;   /* logo forest green */
  --green-light:     #EDF2EA;
  --green-dark:      #3A5530;
  --red:             #DC2626;
  --red-light:       #FEF2F2;
  --orange:          #EA580C;
  --orange-light:    #FFF7ED;
  --purple:          #7C3AED;
  --purple-light:    #F5F3FF;
  --teal:            #0D9488;
  --teal-light:      #F0FDFA;
  --yellow:          #D97706;
  --yellow-light:    #FFFBEB;

  /* ── Backgrounds ────────────────────────────────────────────── */
  --bg-page:         #F8FAFC;
  --bg-base:         #F8FAFC;
  --bg-surface:      #FFFFFF;
  --bg-elevated:     #F1F5F9;
  --bg-overlay:      rgba(15, 23, 42, 0.5);

  /* ── Text ───────────────────────────────────────────────────── */
  --text-primary:    #0F172A;
  --text-secondary:  #1E293B;
  --text-muted:      #475569;
  --text-faint:      #94A3B8;
  --text-inverse:    #FFFFFF;

  /* ── Borders ─────────────────────────────────────────────────── */
  --border:          #E2E8F0;
  --border-mid:      #CBD5E1;
  --border-strong:   #94A3B8;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-sm:       0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:       0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:       0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.05);
  --shadow-xl:       0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.05);

  /* ── Typography ─────────────────────────────────────────────── */
  --font-sans:       'Inter', system-ui, sans-serif;
  --font-display:    'Inter', system-ui, sans-serif;
  --font-mono:       'DM Mono', 'SF Mono', 'Fira Code', monospace;

  /* ── Radius ──────────────────────────────────────────────────── */
  --radius-xs:       3px;
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       14px;
  --radius-xl:       18px;
  --radius-full:     9999px;

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

  /* ── Layout ──────────────────────────────────────────────────── */
  --header-height:     56px;
  --sidebar-width:     220px;
  --rail-width:        300px;

  /* ── Transitions ─────────────────────────────────────────────── */
  --transition-fast:   0.1s ease;
  --transition:        0.18s ease;
  --transition-slow:   0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Legacy aliases ──────────────────────────────────────────── */
  --accent:           var(--primary);
  --accent-green:     var(--green);
  --accent-red:       var(--red);
  --accent-orange:    var(--orange);
  --accent-lime:      var(--green);
  --accent-violet:    var(--purple);
  --accent-teal:      var(--teal);
  --accent-purple:    var(--purple);
  --bg-input:         var(--bg-elevated);

  /* ── Bottom nav (stub — unused on desktop) ───────────────────── */
  --bottom-nav-height: 0px;
}