/* ============================================
   VisitPlan 2.0 — Design tokens
   Updated: UI pass corporate-serious palette
   ============================================ */

:root {
  /* ===== Surfaces ===== */
  --color-bg:           #fafaf7;   /* warm off-white page */
  --color-surface:      #ffffff;   /* card surface */
  --color-surface-alt:  #f4f3ee;   /* hover, table header, alt rows */

  /* ===== Text ===== */
  --color-text:         #0f172a;   /* primary text */
  --color-text-soft:    #475569;   /* secondary */
  --color-text-muted:   #94a3b8;   /* labels, hints */
  --color-text-subtle:  #cbd5e1;   /* placeholders, decorative */

  /* ===== Lines ===== */
  --color-line:         #e7e5dc;
  --color-line-strong:  #d6d3c7;
  --color-border:       #e7e5dc;   /* alias for backwards-compat */
  --color-border-strong: #d6d3c7;  /* alias for backwards-compat */

  /* ===== Brand — Rich Cobalt primary ===== */
  --color-primary:        #1e40af;
  --color-primary-hover:  #1e3a8a;
  --color-primary-soft:   #dbeafe;

  /* ===== Accent — Hot Coral (CTAs, urgency) ===== */
  --color-accent:        #ff5a36;
  --color-accent-hover:  #993c1d;  /* readable on accent-soft (C.8.A) */
  --color-accent-soft:   #ffe4dd;

  /* ===== Signal — Lime (positive, "active") ===== */
  --color-signal:       #a3e635;
  --color-signal-soft:  #ecfccb;

  /* ===== Status palette ===== */
  --color-amber:        #f59e0b;
  --color-amber-soft:   #fef3c7;
  --color-emerald:      #10b981;
  --color-emerald-soft: #d1fae5;
  --color-violet:       #7c3aed;
  --color-violet-soft:  #ede9fe;
  --color-rose:         #e11d48;
  --color-rose-soft:    #ffe4e6;
  --color-slate:        #64748b;
  --color-slate-soft:   #f1f5f9;

  /* ===== Navigation (dark rail) ===== */
  --color-nav:              #0f172a;
  --color-nav-border:       #1e293b;
  --color-nav-text:         #94a3b8;
  --color-nav-text-hover:   #ffffff;
  --color-nav-active-bg:    rgba(255,90,54,0.12);
  --color-nav-active-text:  #ff5a36;
  --color-nav-active-border:#ff5a36;

  /* ===== Backwards-compat aliases ===== */
  --color-success:       var(--color-emerald);
  --color-success-soft:  var(--color-emerald-soft);
  --color-success-light: var(--color-emerald-soft);
  --color-danger:        var(--color-rose);
  --color-danger-soft:   var(--color-rose-soft);
  --color-danger-light:  var(--color-rose-soft);
  --color-warning:       var(--color-amber);
  --color-warning-soft:  var(--color-amber-soft);
  --color-warning-light: var(--color-amber-soft);
  --color-info:          var(--color-primary);
  --color-info-soft:     var(--color-primary-soft);
  --color-info-light:    var(--color-primary-soft);
  --color-primary-light: var(--color-primary-soft);
  --color-text-light:    var(--color-text-muted);

  /* Legacy calendar tokens */
  --color-meeting:       var(--color-violet);
  --color-meeting-light: var(--color-violet-soft);
  --color-visit:         var(--color-emerald);
  --color-visit-light:   var(--color-emerald-soft);
  --color-trip:          var(--color-primary);
  --color-trip-light:    var(--color-primary-soft);

  /* ===== Typography ===== */
  --font-sans:   'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:   'JetBrains Mono', 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
  --font-family: var(--font-sans);  /* backwards-compat alias */

  --font-size-xs:   11px;
  --font-size-sm:   12px;
  --font-size-base: 13px;
  --font-size-md:   14px;
  --font-size-lg:   16px;
  --font-size-xl:   18px;
  --font-size-2xl:  22px;
  --font-size-3xl:  28px;
  --font-size-4xl:  64px;   /* hero countdown */

  /* Backwards-compat font-size aliases (rem-based) */
  --font-xs:   0.75rem;
  --font-sm:   0.875rem;
  --font-base: 1rem;
  --font-lg:   1.125rem;
  --font-xl:   1.25rem;
  --font-2xl:  1.5rem;
  --font-3xl:  1.875rem;

  --letter-spacing-tight:  -0.025em;
  --letter-spacing-normal: -0.005em;
  --letter-spacing-wide:   0.10em;
  --letter-spacing-wider:  0.16em;

  /* ===== Shape ===== */
  --radius-sm:    6px;
  --radius:       8px;     /* backwards-compat */
  --radius-md:    8px;     /* buttons */
  --radius-lg:    12px;    /* cards */
  --radius-xl:    14px;    /* modals */
  --radius-pill:  999px;
  --radius-chip:  8px;

  /* ===== Spacing ===== */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  12px;
  --spacing-lg:  16px;
  --spacing-xl:  24px;
  --spacing-2xl: 32px;

  /* Backwards-compat spacing aliases (rem-based) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ===== Layout dimensions ===== */
  --sidebar-width:           232px;
  --sidebar-collapsed-width: 64px;
  --topbar-height:           54px;
  --bottombar-height:        60px;

  /* ===== Shadows ===== */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow:    0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-card-hover: 0 4px 20px rgba(15, 23, 42, 0.06);

  /* ===== Transitions ===== */
  --transition-fast:   150ms ease;
  --transition:        200ms ease;
  --transition-card:   0.18s ease-out;
  --transition-button: 0.15s ease-out;
}