/* ============================================================
   Burst Analytics — Design tokens
   Source of truth: Burst Analytics Design System (handoff).
   Ported verbatim from design-system/tokens/*.css.
   Fonts are enqueued separately (see functions.php); the families
   below only name them.
   ============================================================ */

:root {
  /* ---- Brand: Burst Blue (primary) ---- */
  --blue-50:  #eaf0fb;
  --blue-100: #cdd9f3;
  --blue-200: #9fb4e6;
  --blue-300: #6586d4;
  --blue-400: #2f57b6;
  --blue-500: #0a3a99;
  --blue-600: #002B80;   /* core brand blue */
  --blue-700: #002268;
  --blue-800: #001a4f;
  --blue-900: #001138;

  /* ---- Brand: Burst Gold (secondary) ---- */
  --gold-50:  #fbf6e4;
  --gold-100: #f4e7b8;
  --gold-200: #ecd585;
  --gold-300: #e1c259;
  --gold-400: #D2AF39;   /* core brand gold */
  --gold-500: #bd9b27;
  --gold-600: #9c7e1c;
  --gold-700: #7a6216;

  /* ---- Brand: Burst Teal (tertiary / positive) ---- */
  --teal-50:  #e3f5f1;
  --teal-100: #bce7df;
  --teal-200: #84d3c6;
  --teal-300: #4bbcaa;
  --teal-400: #2EA599;   /* core brand teal */
  --teal-500: #20897f;
  --teal-600: #176c65;
  --teal-700: #11534e;

  /* ---- Accent: Signal Orange (alert / attention) ---- */
  --orange-50:  #fdeede;
  --orange-100: #f9d2ad;
  --orange-200: #f3ad6e;
  --orange-300: #ec8c3c;
  --orange-400: #E27316;   /* core brand orange */
  --orange-500: #c25f0e;
  --orange-600: #99490a;

  /* ---- Neutrals: cool slate ramp (Mist Gray anchored) ---- */
  --ink:       #0B0E14;
  --neutral-900: #14181f;
  --neutral-800: #232a35;
  --neutral-700: #3a434f;
  --neutral-600: #586374;
  --neutral-500: #7d8794;
  --neutral-400: #a6adb7;
  --neutral-300: #c7cace;
  --neutral-250: #D0CECE;
  --neutral-200: #dee0e3;
  --neutral-100: #eef0f2;
  --neutral-50:  #f6f7f9;
  --white:     #ffffff;

  /* ---- Semantic: surfaces ---- */
  --surface-page:       var(--neutral-50);
  --surface-card:       var(--white);
  --surface-sunken:     var(--neutral-100);
  --surface-inverse:    var(--ink);
  --surface-brand:      var(--blue-600);
  --surface-brand-deep: var(--blue-800);

  /* ---- Semantic: text ---- */
  --text-strong:   var(--ink);
  --text-body:     var(--neutral-800);
  --text-muted:    var(--neutral-600);
  --text-subtle:   var(--neutral-500);
  --text-on-brand: var(--white);
  --text-on-gold:  var(--ink);
  --text-link:     var(--blue-600);

  /* ---- Semantic: borders & lines ---- */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--blue-600);
  --ring-focus:     rgba(0, 43, 128, 0.35);

  /* ---- Semantic: interactive (primary = blue) ---- */
  --action:        var(--blue-600);
  --action-hover:  var(--blue-700);
  --action-active: var(--blue-800);
  --accent:        var(--gold-400);
  --accent-hover:  var(--gold-500);

  /* ---- Status / feedback ---- */
  --success:    var(--teal-400);
  --success-bg: var(--teal-50);
  --warning:    var(--gold-400);
  --warning-bg: var(--gold-50);
  --danger:     #d23b2e;
  --danger-bg:  #fbe9e7;
  --info:       var(--blue-500);
  --info-bg:    var(--blue-50);

  /* ---- Typography: families ---- */
  --font-display: "Saira", "Franklin Gothic Medium", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", "Consolas", monospace;

  /* ---- Typography: weights ---- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  /* ---- Typography: type scale ---- */
  --text-3xs: 0.6875rem; /* 11px */
  --text-2xs: 0.75rem;   /* 12px */
  --text-xs:  0.8125rem; /* 13px */
  --text-sm:  0.875rem;  /* 14px */
  --text-md:  1rem;      /* 16px base */
  --text-lg:  1.125rem;  /* 18px */
  --text-xl:  1.375rem;  /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2.25rem;   /* 36px */
  --text-4xl: 3rem;      /* 48px */
  --text-5xl: 3.75rem;   /* 60px */
  --text-6xl: 4.75rem;   /* 76px */

  /* ---- Typography: line heights ---- */
  --leading-tight:   1.06;
  --leading-snug:    1.22;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Typography: letter spacing ---- */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ---- Spacing (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  2rem;
  --space-8:  2.5rem;
  --space-9:  3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;

  /* ---- Container widths ---- */
  --container-sm: 640px;
  --container-md: 900px;
  --container-lg: 1140px;
  --container-xl: 1320px;
  --site-max:     1180px;

  /* ---- Z-index scale ---- */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   1100;
  --z-toast:   1200;

  /* ---- Corner radii ---- */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;
  --radius-card: var(--radius-lg);

  /* ---- Elevation ---- */
  --shadow-xs: 0 1px 2px rgba(11, 14, 20, 0.06);
  --shadow-sm: 0 1px 3px rgba(11, 14, 20, 0.08), 0 1px 2px rgba(11, 14, 20, 0.06);
  --shadow-md: 0 4px 12px rgba(11, 14, 20, 0.08), 0 2px 4px rgba(11, 14, 20, 0.05);
  --shadow-lg: 0 12px 28px rgba(11, 14, 20, 0.12), 0 4px 8px rgba(11, 14, 20, 0.06);
  --shadow-xl: 0 24px 56px rgba(11, 14, 20, 0.18);
  --shadow-brand: 0 10px 30px rgba(0, 43, 128, 0.22);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ---- Focus ring ---- */
  --focus-ring: 0 0 0 3px var(--ring-focus);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snappy: cubic-bezier(0.34, 1.4, 0.5, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 340ms;

  /* ---- Brand angular motif ---- */
  --cut: 14px;
  --clip-cut: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  --clip-tab: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);

  /* ---- Brand gradients ---- */
  --grad-brand: linear-gradient(120deg, var(--blue-800) 0%, var(--blue-600) 60%, var(--blue-500) 100%);
  --grad-ink:   linear-gradient(160deg, #10151f 0%, #0b0e14 100%);
  --grad-gold-edge: linear-gradient(90deg, var(--gold-400), var(--gold-300));
}