/* =============================================================
   NORA CRM - Design Tokens
   ----------------------------------------------------------------
   Single source of truth for colors, typography, spacing.
   The two color variable groups serve different purposes:

   1. --nora-* : the platform's chrome (sidebar, login, system UI)
                 always teal/coral, never changes per tenant

   2. --brand-* : the customer's agency brand
                 swapped at runtime by the layout template
                 every customer-facing surface uses these
   ============================================================= */

:root {
  /* ============== Nora platform chrome ============== */
  --nora-coral:        #E8826B;
  --nora-coral-deep:   #993C1D;
  --nora-coral-pale:   rgba(232,130,107,0.10);
  --nora-teal:         #0D5E5C;
  --nora-teal-light:   #1A8E8A;
  --nora-teal-deep:    #0A4A48;

  --nora-stone:        #F8F5F0;
  --nora-sand:         #E8DDD0;
  --nora-cream:        #FAF7F2;

  --nora-ink:          #1F2937;
  --nora-ink-soft:     rgba(31,41,55,0.72);
  --nora-ink-muted:    rgba(31,41,55,0.55);
  --nora-ink-faint:    rgba(31,41,55,0.30);

  --nora-success:      #3B6D11;
  --nora-success-bg:   rgba(99,153,34,0.10);
  --nora-warn:         #D97706;
  --nora-warn-bg:      rgba(217,119,6,0.10);
  --nora-danger:       #B91C1C;
  --nora-danger-bg:    rgba(185,28,28,0.10);

  /* ============== Per-tenant brand (overridden in layout) ============== */
  --brand-primary:     var(--nora-coral);
  --brand-secondary:   var(--nora-teal);
  --brand-bg:          var(--nora-stone);

  /* ============== Typography ============== */
  --font-serif:        'Fraunces', 'Times New Roman', Georgia, serif;
  --font-sans:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:         'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

  /* ============== Layout ============== */
  --sidebar-w:         220px;
  --content-max:       1280px;
  --content-pad:       28px;
  --radius-sm:         6px;
  --radius:            10px;
  --radius-lg:         16px;

  /* ============== Spacing scale ============== */
  --gap-xs:            4px;
  --gap-sm:            8px;
  --gap-md:            16px;
  --gap-lg:            24px;
  --gap-xl:            40px;

  /* ============== Shadows ============== */
  --shadow-sm:         0 1px 2px rgba(31,41,55,0.06);
  --shadow:            0 4px 12px rgba(31,41,55,0.08);
  --shadow-lg:         0 12px 32px rgba(31,41,55,0.10);

  /* ============== Transitions ============== */
  --t-fast:            120ms ease;
  --t:                 200ms ease;
  --t-slow:            350ms ease;
}