/* ==========================================================================
   BRIDGEVANTI CRM — Design Tokens
   Single source of truth for color, type, spacing, radius, elevation.
   Components must reference these variables, never raw values.
   ========================================================================== */

:root {
  /* ---- Brand primitives ---- */
  --bv-forest-950: #071D13;
  --bv-forest-900: #0B2A1C;   /* brand: deep forest green */
  --bv-forest-800: #113524;
  --bv-forest-700: #17432F;
  --bv-forest-600: #1E553D;
  --bv-green-500:  #2A6E50;   /* interactive green (AA on white) */
  --bv-green-400:  #4C8C6E;
  --bv-green-200:  #CFE2D7;
  --bv-green-100:  #E6F0EA;
  --bv-green-50:   #F2F7F4;

  --bv-gold-700:   #7D6526;   /* gold text on light (AA) */
  --bv-gold-600:   #A3863D;
  --bv-gold-500:   #C2A45A;   /* brand: antique gold */
  --bv-gold-300:   #DCC895;
  --bv-gold-100:   #F3EBD6;
  --bv-gold-50:    #F9F5EA;

  --bv-cream-300:  #E8E0CD;
  --bv-cream-200:  #F3EEE2;   /* brand: warm cream */
  --bv-cream-100:  #F8F5EE;
  --bv-white:      #FFFFFF;   /* brand: white */

  /* ---- Warm neutrals (ink) ---- */
  --bv-ink-900: #16201B;
  --bv-ink-700: #3B4741;
  --bv-ink-500: #66716B;
  --bv-ink-400: #8A938E;
  --bv-ink-300: #B4BAB6;
  --bv-line:    #E4DFD3;
  --bv-line-soft: #EEEAE0;

  /* ---- Semantic ---- */
  --color-bg:            var(--bv-cream-100);
  --color-surface:       var(--bv-white);
  --color-surface-alt:   var(--bv-cream-200);
  --color-surface-sunk:  #F4F1E9;
  --color-border:        var(--bv-line);
  --color-border-soft:   var(--bv-line-soft);
  --color-border-strong: #CFC8B8;

  --color-text:          var(--bv-ink-900);
  --color-text-muted:    var(--bv-ink-500);
  --color-text-subtle:   var(--bv-ink-400);
  --color-text-inverse:  var(--bv-cream-200);

  --color-primary:       var(--bv-forest-900);
  --color-primary-hover: var(--bv-forest-700);
  --color-accent:        var(--bv-gold-500);
  --color-accent-hover:  #B3954B;
  --color-link:          var(--bv-green-500);
  --color-focus:         rgba(194, 164, 90, .55);

  --color-success:    #2A6E50;  --color-success-bg: #E6F0EA;
  --color-warning:    #9A6A12;  --color-warning-bg: #FBF0D9;
  --color-danger:     #A63D2A;  --color-danger-bg:  #F8E5E0;
  --color-info:       #2F5D7C;  --color-info-bg:    #E3EDF4;

  /* ---- Lead sources (data series) ---- */
  --src-salesnav:   #1E553D;  --src-salesnav-bg:  #E6F0EA;
  --src-instagram:  #C2A45A;  --src-instagram-bg: #F6EFDD;
  --src-d2d:        #5E7A8C;  --src-d2d-bg:       #E7EDF1;
  --src-coldemail:  #7B6390;  --src-coldemail-bg: #EFEAF3;
  --src-coldcall:   #A8664A;  --src-coldcall-bg:  #F6EAE4;

  /* ---- Temperature ---- */
  --temp-cold: #5E7A8C;
  --temp-warm: #C08A2D;
  --temp-hot:  #B5462F;

  /* ---- Typography ---- */
  --font-display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-2xs: 0.6875rem; /* 11 */
  --text-xs:  0.75rem;   /* 12 */
  --text-sm:  0.8125rem; /* 13 */
  --text-md:  0.875rem;  /* 14 — base UI */
  --text-lg:  1rem;      /* 16 */
  --text-xl:  1.125rem;  /* 18 */
  --text-2xl: 1.375rem;  /* 22 */
  --text-3xl: 1.75rem;   /* 28 */
  --text-4xl: 2.125rem;  /* 34 */

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-body:  1.5;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;
  --weight-black:   800;

  --tracking-caps: 0.08em;

  /* ---- Spacing (4px grid) ---- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 2px rgba(11, 42, 28, .05);
  --shadow-sm: 0 1px 2px rgba(11, 42, 28, .05), 0 1px 3px rgba(11, 42, 28, .04);
  --shadow-md: 0 2px 4px rgba(11, 42, 28, .04), 0 6px 16px -4px rgba(11, 42, 28, .08);
  --shadow-lg: 0 12px 32px -8px rgba(11, 42, 28, .18), 0 4px 8px rgba(11, 42, 28, .05);
  --shadow-focus: 0 0 0 3px var(--color-focus);

  /* ---- Motion (restrained) ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* ---- Layout ---- */
  --sidebar-w: 248px;
  --topbar-h: 64px;
  --bottomnav-h: 64px;
  --content-max: 1360px;
  --tap-min: 44px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}