/* ============================================================
   variables.css — design tokens (Emerald & Brass Luxe)
   Deep emerald canvas, SOLID ivory cards, brass accents,
   serif headlines. Opaque + decorated. Custom properties ONLY.
   ============================================================ */
:root {
  /* ---- Surfaces ---- */
  --content-bg:        #0B2A20;   /* deep emerald canvas */
  --app-bg:            #0B2A20;
  --card-bg:           #FBF7EC;   /* solid warm ivory card */
  --card-bg-2:         #F4EEDD;   /* deeper ivory (insets, hovers) */
  --surface-subtle:    #F1EAD6;   /* table headers, insets */
  --surface-hover:     #EFE6CF;   /* hover wash on ivory */
  --glass-bg:          #FBF7EC;
  --glass-border:      rgba(176,137,74,0.22);

  /* ---- Sidebar (deep emerald panel) ---- */
  --sidebar-bg:        #07201A;
  --sidebar-hover:     rgba(201,168,106,0.10);
  --sidebar-active:    rgba(201,168,106,0.16);
  --sidebar-border:    rgba(201,168,106,0.18);
  --sidebar-width:     266px;
  --sidebar-collapsed: 82px;

  /* ---- Brand / Accent (brass is the signature) ---- */
  --brand-primary:     #B0894A;   /* brass */
  --brand-primary-dk:  #8A6A2E;
  --brand-primary-700: #7A5A22;   /* deep brass — readable text/links on ivory */
  --brand-secondary:   #7A5A22;
  --brand-soft:        rgba(176,137,74,0.15);
  --brand-glow:        rgba(201,168,106,0.45);
  --gradient-brand:    linear-gradient(135deg, #D8BE85 0%, #A87F38 100%);   /* brass fill */
  --gradient-brand-2:  linear-gradient(135deg, #E4CE97 0%, #C9A86A 45%, #A07731 100%);
  --gradient-text:     linear-gradient(118deg, #1F4D39 0%, #6E5320 52%, #A87F38 100%);

  /* ---- Rich surfaces, brass borders, ornament ---- */
  --card-surface:       #FBF7EC;
  --card-surface-2:     #F6F0E0;
  --card-grad:          linear-gradient(165deg, #FCF8EE 0%, #F4EBD6 100%);  /* warm ivory → deeper cream */
  --gradient-cream:     linear-gradient(135deg, #FFFDF7 0%, #FAF4E6 52%, #F3E9D2 100%);
  --gradient-gold-wash: linear-gradient(135deg, rgba(201,168,106,0.20), rgba(168,127,56,0.06));
  --gold-border:        rgba(176,137,74,0.30);
  --sheen-top:          inset 0 1px 0 rgba(255,255,255,0.7);
  --ring-gold:          inset 0 0 0 1px rgba(176,137,74,0.22);
  --glow-gold:          0 22px 48px -22px rgba(6,24,18,0.6);
  --glow-gold-sm:       0 14px 30px -16px rgba(6,24,18,0.5);

  /* ---- "Glass" tokens repurposed → SOLID ivory (no transparency) ---- */
  --glass-surface:      #FBF7EC;
  --glass-surface-2:    #F6F0E0;
  --glass-edge:         rgba(176,137,74,0.28);
  --glass-blur:         saturate(100%);

  /* ---- Ink (primary action surface — deep emerald) ---- */
  --ink:               #0C3526;
  --ink-2:             #15543C;
  --gradient-ink:      linear-gradient(135deg, #16573E 0%, #0B3325 100%);

  /* ---- Borders (brass-tinted hairlines) ---- */
  --card-border:       rgba(176,137,74,0.26);
  --border:            rgba(34,39,31,0.12);
  --border-strong:     rgba(34,39,31,0.20);
  --hairline:          rgba(34,39,31,0.09);

  /* ---- Shadows (deep, cool-green so ivory lifts off the canvas) ---- */
  --card-shadow:       0 2px 4px rgba(5,20,14,0.20), 0 20px 44px -16px rgba(4,16,11,0.50);
  --card-shadow-hover: 0 4px 8px rgba(5,20,14,0.24), 0 28px 56px -16px rgba(4,16,11,0.56);
  --shadow-xs:         0 1px 2px rgba(5,20,14,0.18);
  --shadow-sm:         0 2px 6px rgba(5,20,14,0.22);
  --shadow-md:         0 8px 20px -6px rgba(5,20,14,0.32);
  --shadow-lg:         0 18px 40px -14px rgba(4,16,11,0.46);
  --shadow-xl:         0 32px 70px -20px rgba(4,16,11,0.56);
  --shadow-primary:    0 12px 26px -10px rgba(8,40,28,0.6);
  --shadow-gold:       0 12px 26px -10px rgba(120,90,34,0.5);
  --focus-ring:        0 0 0 4px rgba(176,137,74,0.30);

  /* ---- Easing curves (strong, intentional) ---- */
  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer:  cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring:  cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ---- Typography ---- */
  --text-primary:        #22271F;   /* deep ink-green (on ivory) */
  --text-secondary:      #54594B;
  --text-muted:          #8A8C7C;
  --text-faint:          #ABAC9B;
  --text-sidebar:        rgba(226,229,214,0.70);   /* on emerald */
  --text-sidebar-active: #FBF7EC;

  /* ---- Status (tuned for ivory backgrounds) ---- */
  --status-active:   #1E8F5E;
  --status-success:  #1E8F5E;
  --status-warning:  #B07B16;
  --status-danger:   #C0414A;
  --status-info:     #2D6E8F;
  --status-neutral:  #6E7468;

  /* Status soft backgrounds (light tints on ivory) */
  --soft-success: rgba(30,143,94,0.13);
  --soft-warning: rgba(176,123,22,0.14);
  --soft-danger:  rgba(192,65,74,0.12);
  --soft-info:    rgba(45,110,143,0.12);
  --soft-primary: rgba(176,137,74,0.16);
  --soft-purple:  rgba(110,74,126,0.14);
  --soft-neutral: rgba(110,116,104,0.13);

  /* Status text-on-soft (the readable deep variant) */
  --on-success: #136B45;
  --on-warning: #8A5F10;
  --on-danger:  #A33640;
  --on-info:    #235468;
  --on-primary: #7A5A22;
  --on-purple:  #573E63;
  --on-neutral: #4C5247;

  /* ---- Project Status ---- */
  --status-inquiry:    #6E4A7E;
  --status-progress:   #2D6E8F;
  --status-hold:       #B07B16;
  --status-completed:  #1E8F5E;
  --status-cancelled:  #C0414A;

  /* ---- Milestone Status ---- */
  --ms-pending:    #ABAC9B;
  --ms-inprogress: #B07B16;
  --ms-done:       #1E8F5E;

  /* ---- Layout ---- */
  --topbar-height:   68px;
  --content-padding: 32px;

  /* ---- Radius ---- */
  --radius-sm:   8px;
  --radius-md:   11px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-full: 9999px;

  /* ---- Fonts ---- */
  --font-display: 'Fraunces', 'Plus Jakarta Sans', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, monospace;

  /* ---- Transitions (duration + strong ease-out) ---- */
  --transition-fast: 140ms cubic-bezier(0.23, 1, 0.32, 1);
  --transition-base: 240ms cubic-bezier(0.23, 1, 0.32, 1);
  --transition-slow: 420ms cubic-bezier(0.23, 1, 0.32, 1);
}