/* ==========================================================================
   CRM Offline — Design Tokens (CSS Custom Properties)
   Light & Dark mode values, gradients, and spacing tokens.
   Brand colors: Gold #f2b622, Teal #2d3b3b
   ========================================================================== */

/* ── Google Fonts (Inter + Space Grotesk) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* ── Color: Brand Palette ── */
  --brand-gold:        #f2b622;
  --brand-gold-light:  #fad673;
  --brand-gold-lighter:#fcecc0;
  --brand-gold-dark:   #c9941a;
  --brand-gold-darker: #a06e12;

  --brand-teal:        #2d3b3b;
  --brand-teal-light:  #4a5c5c;
  --brand-teal-lighter:#6e7e7e;
  --brand-teal-dark:   #1a2424;
  --brand-teal-darker: #0d1212;

  /* Legacy aliases mapped to new brand */
  --pulse-violet:     var(--brand-gold);
  --signal-magenta:   var(--brand-gold-dark);
  --momentum-orange:  var(--brand-gold-darker);
  --ink-navy:         var(--brand-teal);
  --cloud-white:      #f5f2ed;

  --mint-confirm:     #35d0a0;
  --alert-coral:      #ff5470;
  --slate:            #8a8fa3;

  /* Surface (light) */
  --surface-base:     #f5f2ed;
  --surface-elevated: #ffffff;
  --text-primary:     var(--brand-teal);
  --text-secondary:   var(--brand-teal-lighter);
  --border-color:     #e0dbd3;

  /* Shadows (light — gold-tinted) */
  --shadow-sm: 0 1px 3px rgba(45, 59, 59, 0.08);
  --shadow-md: 0 4px 12px rgba(45, 59, 59, 0.12);
  --shadow-lg: 0 8px 24px rgba(45, 59, 59, 0.15);

  /* ── Gradient ── */
  --brand-gradient: linear-gradient(135deg, #f2b622 0%, #c9941a 55%, #2d3b3b 100%);
  --pulse-gradient: var(--brand-gradient);

  /* ── Typography ── */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Cascadia Code', monospace;

  /* ── Radius ── */
  --radius-card:    16px;
  --radius-button:  12px;
  --radius-pill:    9999px;
  --radius-input:   8px;

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

  /* ── Sidebar ── */
  --sidebar-width: 240px;
  --sidebar-collapsed: 64px;
  --topbar-height: 60px;

  /* ── Transitions ── */
  --transition-fast: 200ms ease-out;
  --transition-base: 260ms ease-out;
}

/* ── Dark Mode ── */
[data-theme="dark"] {
  --surface-base:     var(--brand-teal-dark);
  --surface-elevated: var(--brand-teal);
  --text-primary:     #f0ebe0;
  --text-secondary:   #9ea8a8;
  --border-color:     #3d4d4d;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  --brand-gradient: linear-gradient(135deg, #f2b622 0%, #c9941a 55%, #1a2424 100%);
  --pulse-gradient: var(--brand-gradient);
}