/* ==========================================================================
   MarTech LA — Colors & Type
   Base variables + semantic tokens + element styles.
   Import with: <link rel="stylesheet" href="colors_and_type.css">
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* Inter — local brand files.
   Three optical sizes are provided (18pt for small UI, 24pt for body/headlines,
   28pt for display). We expose them as three families so the system can pick
   the optical cut that matches the usage. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; src: url('fonts/Inter_24pt-Thin.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; src: url('fonts/Inter_24pt-ThinItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; src: url('fonts/Inter_24pt-ExtraLight.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; src: url('fonts/Inter_24pt-ExtraLightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; src: url('fonts/Inter_24pt-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; src: url('fonts/Inter_24pt-LightItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url('fonts/Inter_24pt-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; src: url('fonts/Inter_24pt-Italic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; src: url('fonts/Inter_24pt-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; src: url('fonts/Inter_24pt-MediumItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; src: url('fonts/Inter_24pt-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; src: url('fonts/Inter_24pt-SemiBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; src: url('fonts/Inter_24pt-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; src: url('fonts/Inter_24pt-BoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; src: url('fonts/Inter_24pt-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; src: url('fonts/Inter_24pt-ExtraBoldItalic.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; src: url('fonts/Inter_24pt-Black.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; src: url('fonts/Inter_24pt-BlackItalic.ttf') format('truetype'); font-display: swap; }

/* Inter Small (18pt optical) — use for dense UI ≤14px */
@font-face { font-family: 'Inter Small'; font-style: normal; font-weight: 300; src: url('fonts/Inter_18pt-Light.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Small'; font-style: normal; font-weight: 400; src: url('fonts/Inter_18pt-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Small'; font-style: normal; font-weight: 500; src: url('fonts/Inter_18pt-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Small'; font-style: normal; font-weight: 600; src: url('fonts/Inter_18pt-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Small'; font-style: normal; font-weight: 700; src: url('fonts/Inter_18pt-Bold.ttf') format('truetype'); font-display: swap; }

/* Inter Display (28pt optical) — use for display ≥32px */
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 600; src: url('fonts/Inter_28pt-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 700; src: url('fonts/Inter_28pt-Bold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 800; src: url('fonts/Inter_28pt-ExtraBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 900; src: url('fonts/Inter_28pt-Black.ttf') format('truetype'); font-display: swap; }

:root {
  /* ---------- Brand — MTLA Purple ---------------------------------------- */
  --mtla-purple:        #6F00FF;   /* primary from brand PDF */
  --mtla-purple-600:    #4c2fc9;   /* per brand notes, slightly desaturated primary */
  --mtla-purple-700:    #3a1f9e;
  --mtla-purple-800:    #2d1b69;   /* dark, used for gradient start */
  --mtla-purple-900:    #1a0f40;   /* deepest end of gradient */
  --mtla-purple-300:    #a87dff;
  --mtla-purple-200:    #c8acff;
  --mtla-purple-100:    #e4d6ff;
  --mtla-purple-50:     #f3edff;

  /* Signature header gradient (dark → primary) */
  --mtla-gradient-header:  linear-gradient(135deg, #2d1b69 0%, #4c2fc9 100%);
  --mtla-gradient-header-steep: linear-gradient(180deg, #1a0f40 0%, #2d1b69 45%, #4c2fc9 100%);
  --mtla-gradient-accent:  linear-gradient(135deg, #4c2fc9 0%, #6F00FF 100%);

  /* ---------- Neutrals --------------------------------------------------- */
  --neutral-0:    #FFFFFF;
  --neutral-25:   #FDFCFA;   /* off-white (brand "FFFDFA") */
  --neutral-50:   #f9fafb;
  --neutral-100:  #f3f4f6;   /* content section bg */
  --neutral-200:  #e5e7eb;
  --neutral-300:  #d1d5db;
  --neutral-400:  #9ca3af;
  --neutral-500:  #6b7280;
  --neutral-600:  #4b5563;
  --neutral-700:  #374151;
  --neutral-800:  #1f2937;
  --neutral-900:  #111827;
  --neutral-950:  #333333;   /* brand ink "333333" */

  /* ---------- Semantic status colors ------------------------------------- */
  --status-positive:       #16a34a;
  --status-positive-bg:    #dcfce7;
  --status-positive-fg:    #15803d;

  --status-risk:           #dc2626;
  --status-risk-bg:        #fee2e2;
  --status-risk-fg:        #b91c1c;

  --status-warning:        #ea580c;
  --status-warning-bg:     #ffedd5;
  --status-warning-fg:     #c2410c;

  --status-info:           #2563eb;
  --status-info-bg:        #dbeafe;
  --status-info-fg:        #1d4ed8;

  /* ---------- Foreground / background roles ------------------------------ */
  --fg-1:          var(--neutral-950);   /* primary text */
  --fg-2:          var(--neutral-700);   /* secondary text */
  --fg-3:          var(--neutral-500);   /* tertiary / meta */
  --fg-4:          var(--neutral-400);   /* disabled / hints */
  --fg-on-dark:    #ffffff;              /* text on gradient header */
  --fg-on-dark-2:  rgba(255,255,255,0.72);
  --fg-on-dark-3:  rgba(255,255,255,0.48);
  --fg-link:       var(--mtla-purple-600);

  --bg-app:        var(--neutral-100);   /* app background */
  --bg-surface:    var(--neutral-0);     /* card */
  --bg-subtle:     var(--neutral-50);
  --bg-sunken:     var(--neutral-100);
  --bg-offwhite:   var(--neutral-25);

  --border-1:      var(--neutral-200);
  --border-2:      var(--neutral-300);
  --border-strong: var(--neutral-400);
  --focus-ring:    color-mix(in oklch, var(--mtla-purple-600) 40%, transparent);

  /* ---------- Typography ------------------------------------------------- */
  /* Inter local — three optical sizes:
       --font-sans-small   → 18pt cut, use for dense UI ≤14px
       --font-sans         → 24pt cut, default body & UI
       --font-sans-display → 28pt cut, use for display ≥32px           */
  --font-sans-small:   'Inter Small', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-sans:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-sans-display: 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:         'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* sizes */
  --fs-display: 56px;
  --fs-h1: 40px;
  --fs-h2: 28px;
  --fs-h3: 20px;
  --fs-h4: 17px;
  --fs-body: 15px;
  --fs-body-sm: 13px;
  --fs-meta: 12px;
  --fs-stat: 44px;       /* hero stat callouts */
  --fs-stat-lg: 64px;

  /* line-heights */
  --lh-tight: 1.1;
  --lh-snug: 1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  /* tracking */
  --ls-tight: -0.025em;
  --ls-snug: -0.012em;
  --ls-normal: 0;
  --ls-wide: 0.08em;   /* for eyebrows / all-caps labels */

  /* ---------- Spacing ---------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- Radii ------------------------------------------------------ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;     /* signature card radius */
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(17,24,39,0.04);
  --shadow-sm: 0 1px 2px rgba(17,24,39,0.05), 0 1px 3px rgba(17,24,39,0.06);
  --shadow-md: 0 2px 4px rgba(17,24,39,0.05), 0 4px 10px rgba(17,24,39,0.06);
  --shadow-lg: 0 4px 12px rgba(17,24,39,0.08), 0 12px 28px rgba(17,24,39,0.08);
  --shadow-xl: 0 12px 32px rgba(17,24,39,0.12), 0 24px 48px rgba(17,24,39,0.12);
  --shadow-header: 0 12px 32px rgba(45, 27, 105, 0.28);   /* header lift */
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---------- Motion ----------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-med: 200ms;
  --dur-slow: 320ms;
}

/* =========================================================================
   Base element styles
   ========================================================================= */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0 0 var(--space-3);
}

.display {
  font-family: var(--font-sans-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

h1, .h1 { font-family: var(--font-sans-display); }

.stat {
  font-family: var(--font-sans-display);
  font-size: var(--fs-stat);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.stat-lg {
  font-family: var(--font-sans-display);
  font-size: var(--fs-stat-lg);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-3);
}

.meta {
  font-size: var(--fs-meta);
  color: var(--fg-3);
  font-weight: var(--fw-medium);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--neutral-100);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--neutral-800);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
a:hover { text-decoration: underline; }

/* =========================================================================
   Utility primitives
   ========================================================================= */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.header-gradient {
  background: var(--mtla-gradient-header);
  color: var(--fg-on-dark);
}

.tabular { font-variant-numeric: tabular-nums; }

.delta-up   { color: var(--status-positive); }
.delta-down { color: var(--status-risk); }
.delta-warn { color: var(--status-warning); }