/* =====================================================
   36 Rule — design tokens
   Lifted verbatim from the site4 wireframe so the rebuild
   matches it colour for colour. Two layers: raw brand
   ramps first, semantic aliases second. Only ever use the
   semantic names in components.
   ===================================================== */

:root {
  /* --- Color 1 — Gold / Accent --- */
  --color-1: #eaa621;
  --color-1-light: #ffff99;
  --color-1-lighter: #ffffe9;
  --color-1-dark: #d6920d;
  --color-1-darker: #b87a00;
  --color-1-transparent-1: rgba(234, 166, 33, 0.08);
  --color-1-transparent-2: rgba(234, 166, 33, 0.16);
  --color-1-transparent-3: rgba(234, 166, 33, 0.30);
  --color-1-transparent: var(--color-1-transparent-2);

  /* --- Color 2 — Navy / Dark --- */
  --color-2: #002858;
  --color-2-light: #64a0d0;
  --color-2-lighter: #b4f0ff;
  --color-2-dark: #001444;
  --color-2-darker: #000c2e;
  --color-2-transparent-1: rgba(0, 40, 88, 0.08);
  --color-2-transparent-2: rgba(0, 40, 88, 0.16);
  --color-2-transparent-3: rgba(0, 40, 88, 0.30);

  /* --- Color 3 — Warm Earth --- */
  --color-3: #5c3a1e;
  --color-3-light: #ac9470;
  --color-3-lighter: #fce4c0;
  --color-3-dark: #341c00;
  --color-3-darker: #200800;

  /* --- Color 4 — Tawny Brown --- */
  --color-4: #7a4e1a;
  --color-4-light: #d0ac7c;
  --color-4-lighter: #fffccc;
  --color-4-dark: #583404;
  --color-4-darker: #442000;

  /* --- Type --- */
  --font-1: "Inter", ui-sans-serif, system-ui, -apple-system,
            "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-2: "Fraunces", Georgia, Cambria,
            "Times New Roman", Times, serif;

  /* --- Semantic aliases --- */
  --accent: var(--color-1);
  --accent-light: var(--color-1-light);
  --accent-dark: var(--color-1-dark);
  --accent-glow: var(--color-1-transparent-2);
  --dark: var(--color-2);
  --dark-deep: var(--color-2-dark);
  --dark-deeper: var(--color-2-darker);

  --color-white: #fff;
  --color-off-white: #f8fafc;
  --color-cream: #f1f5f9;
  --color-border: #d3e0ec;
  --color-muted: #6b7280;
  --color-body-text: #374151;
  --color-heading: #111827;

  /* --- Status --- */
  --color-status-success: #16a34a;
  --color-status-success-bg: #dcfce7;
  --color-status-success-dark: #15803d;
  --color-status-danger: #dc2626;
  --color-status-danger-bg: #fee2e2;
  --color-status-danger-dark: #b91c1c;
  --color-status-warning: #d97706;
  --color-status-warning-bg: #fef3c7;
  --color-status-warning-dark: #b45309;
  --color-status-info: #2563eb;
  --color-status-info-bg: #dbeafe;
  --color-status-info-dark: #1d4ed8;
  --color-status-neutral: #6b7280;
  --color-status-neutral-bg: #f3f4f6;

  /* --- Scale --- */
  --fs-eyebrow: 0.7rem;
  --fs-small: 0.8125rem;
  --fs-body: 1rem;
  --fs-h4: 1.125rem;
  --fs-h3: 1.375rem;
  --fs-h2: 1.75rem;
  --fs-h1: 2.25rem;

  --s-4: 4px;   --s-8: 8px;   --s-12: 12px; --s-16: 16px;
  --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px;
  --s-80: 80px; --s-120: 120px;

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 20px; --r-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.08);
  --shadow-bloom: 0 0 0 4px var(--accent-glow), 0 8px 24px rgba(0,0,0,.12);

  --t-fast: 120ms ease;
  --t-med: 240ms ease;

  /* --- Hats (profile types). One colour per hat, used by the
         icon badge, the filter chip and the legend alike. --- */
  --hat-lead: #2563eb;
  --hat-lead-bg: #dbeafe;
  --hat-subcontractor: #7c3aed;
  --hat-subcontractor-bg: #ede9fe;
  --hat-contact: #0891b2;
  --hat-contact-bg: #cffafe;
  --hat-architect: #16a34a;
  --hat-architect-bg: #dcfce7;
  --hat-estimator: #d97706;
  --hat-estimator-bg: #fef3c7;
  --hat-sales: #db2777;
  --hat-sales-bg: #fce7f3;
  --hat-none: #6b7280;
  --hat-none-bg: #f3f4f6;
}