/* ============================================================
   PlumberCallAnswering.com — Design Tokens
   Signal & Flow design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=IBM+Plex+Mono:wght@300;400;500&display=swap');

/* ── Raw Color Tokens ──────────────────────────────────────── */
:root {
  /* Navy — primary brand / trust */
  --navy-950:  #040d1a;
  --navy-900:  #071a33;
  --navy-800:  #0c2d55;
  --navy-700:  #123f78;
  --navy-600:  #1a5299;
  --navy-500:  #2266bb;
  --navy-400:  #4d8fd6;
  --navy-300:  #7eb2e8;
  --navy-200:  #b3d2f5;
  --navy-100:  #deeafa;
  --navy-50:   #f0f6fd;

  /* Copper — action / warmth / plumbing */
  --copper-950: #1a0a02;
  --copper-900: #3a1606;
  --copper-800: #6b2a0d;
  --copper-700: #a03d12;
  --copper-600: #c75218;
  --copper-500: #e06820;
  --copper-400: #f0860a;
  --copper-300: #f5a84d;
  --copper-200: #fcd29a;
  --copper-100: #fdefd8;
  --copper-50:  #fff8f0;

  /* Neutrals */
  --neutral-950: #060810;
  --neutral-900: #0d1520;
  --neutral-800: #1c2a3a;
  --neutral-700: #2e4156;
  --neutral-600: #445a70;
  --neutral-500: #5f7a90;
  --neutral-400: #8099ae;
  --neutral-300: #a8bfce;
  --neutral-200: #cddae5;
  --neutral-100: #e5edf4;
  --neutral-50:  #f4f7fa;
  --neutral-0:   #ffffff;

  /* Semantic state colors */
  --color-success:      #0a8a4e;
  --color-success-bg:   #edfbf4;
  --color-success-mid:  #16a868;
  --color-warning:      #b45309;
  --color-warning-bg:   #fffbeb;
  --color-warning-mid:  #d97706;
  --color-error:        #c81e1e;
  --color-error-bg:     #fef2f2;
  --color-error-mid:    #e53e3e;
  --color-info:         var(--navy-600);
  --color-info-bg:      var(--navy-50);

  /* ── Semantic Aliases ────────────────────────────────────── */
  --bg:           #f4f7fa;
  --bg-page:      #f4f7fa;
  --surface:      #ffffff;
  --surface-mid:  #f0f5fa;
  --elevated:     #ffffff;

  --primary:       var(--navy-700);
  --primary-mid:   var(--navy-600);
  --primary-dark:  var(--navy-800);
  --primary-light: var(--navy-100);

  --accent:        var(--copper-500);
  --accent-mid:    var(--copper-400);
  --accent-dark:   var(--copper-700);
  --accent-light:  var(--copper-100);

  --fg:            var(--neutral-900);
  --fg2:           var(--neutral-600);
  --fg3:           var(--neutral-400);
  --fg-inverse:    #ffffff;

  --border:        var(--neutral-200);
  --border-mid:    var(--neutral-300);
  --border-strong: var(--neutral-400);
}

/* ── Typography ───────────────────────────────────────────── */
:root {
  --font-display: 'Bricolage Grotesque', 'Georgia', sans-serif;
  --font-ui:      'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.75rem;    /* 12px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */

  --leading-none:    1;
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:   -0.03em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.14em;

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
}

/* ── Spacing ──────────────────────────────────────────────── */
:root {
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;
}

/* ── Radii ────────────────────────────────────────────────── */
:root {
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;
}

/* ── Shadows ──────────────────────────────────────────────── */
:root {
  --shadow-xs:     0 1px 2px rgba(12, 45, 85, 0.06);
  --shadow-sm:     0 1px 4px rgba(12, 45, 85, 0.08), 0 0 0 1px rgba(12, 45, 85, 0.04);
  --shadow-md:     0 4px 12px rgba(12, 45, 85, 0.10), 0 0 0 1px rgba(12, 45, 85, 0.04);
  --shadow-lg:     0 8px 24px rgba(12, 45, 85, 0.12), 0 0 0 1px rgba(12, 45, 85, 0.04);
  --shadow-xl:     0 16px 40px rgba(12, 45, 85, 0.16);
  --shadow-copper: 0 0 0 3px rgba(224, 104, 32, 0.25);
  --shadow-navy:   0 0 0 3px rgba(26, 82, 153, 0.20);
}

/* ── Transitions ──────────────────────────────────────────── */
:root {
  --ease:            cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --duration-micro:  120ms;
  --duration-base:   200ms;
  --duration-slow:   350ms;
  --transition:      var(--duration-micro) var(--ease);
  --transition-base: var(--duration-base) var(--ease);
}