/* ============================================================
   SignalMatrix AI — Foundations
   Canonical CSS variables. Import this at the root of any
   SignalMatrix HTML, then style with var(--...) only.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Manrope:wght@600;700;800&display=swap');

:root {
  /* ------------------------------------------------------------
     COLOR — Navy surface ladder
     1000 = darkest (page bg), 500 = lightest navy still used as a surface.
     ------------------------------------------------------------ */

  --navy-1000: #06091A;   /* deeper-than-page; rare. Vignette edges, modal scrims. */
  --navy-900:  #0A0F1E;   /* CANONICAL page background */
  --navy-800:  #121829;   /* card surface */
  --navy-700:  #1A2238;   /* nested element / hover surface */
  --navy-600:  #232C46;   /* input fill on dark / row stripes */
  --navy-500:  #2D375A;   /* dividers when a fill (not 1px line) is needed */

  --bg-primary:   var(--navy-900);
  --bg-secondary: var(--navy-800);
  --bg-tertiary:  var(--navy-700);

  /* Brand green — sampled from the "Matrix" glyphs in the logo */
  --brand-green:        #00FF88;
  --brand-green-rgb:    0, 255, 136;
  --brand-green-soft:   #19FF95;   /* hover brightness boost */
  --brand-green-deep:   #00C46A;   /* press / pinned-down */
  --brand-green-tint:   rgba(0, 255, 136, 0.10);  /* 10% fill */
  --brand-green-glow:   rgba(0, 255, 136, 0.25);  /* outer glow */

  /* ------------------------------------------------------------
     COLOR — Pillar accents
     ------------------------------------------------------------ */

  --pillar-aeo:        #00FF88;   /* AEO / LLM Visibility — brand green */
  --pillar-aeo-tint:   rgba(0, 255, 136, 0.10);
  --pillar-aeo-glow:   rgba(0, 255, 136, 0.25);

  --pillar-automation: #00D4FF;   /* Intelligent Automation — bright cyan */
  --pillar-automation-tint: rgba(0, 212, 255, 0.10);
  --pillar-automation-glow: rgba(0, 212, 255, 0.25);

  --pillar-crm:        #A78BFA;   /* CRM Revenue Capture — electric purple */
  --pillar-crm-tint:   rgba(167, 139, 250, 0.10);
  --pillar-crm-glow:   rgba(167, 139, 250, 0.25);

  --amber:       #F5B544;
  --amber-rgb:   245, 181, 68;
  --amber-tint:  rgba(245, 181, 68, 0.10);
  --amber-glow:  rgba(245, 181, 68, 0.25);

  --teal:        var(--pillar-aeo);
  --teal-rgb:    0, 212, 255;
  --teal-tint:   var(--pillar-aeo-tint);
  --teal-glow:   var(--pillar-aeo-glow);
  --purple:      var(--pillar-automation);
  --purple-rgb:  167, 139, 250;
  --purple-tint: var(--pillar-automation-tint);
  --purple-glow: var(--pillar-automation-glow);

  /* ------------------------------------------------------------
     COLOR — Text scale on navy-900
     ------------------------------------------------------------ */

  --fg:           #FFFFFF;
  --fg-mute:      rgba(255, 255, 255, 0.72);
  --fg-dim:       rgba(255, 255, 255, 0.60);
  --fg-faint:     rgba(255, 255, 255, 0.30);  /* DECORATIVE ONLY */

  --fg-1: var(--fg);
  --fg-2: var(--fg);
  --fg-3: var(--fg-mute);
  --fg-4: var(--fg-dim);
  --fg-disabled: var(--fg-faint);

  --ink-1: #0A0F1E;
  --ink-2: rgba(10, 15, 30, 0.85);
  --ink-3: rgba(10, 15, 30, 0.65);
  --ink-4: rgba(10, 15, 30, 0.50);

  /* ------------------------------------------------------------
     COLOR — Semantic
     ------------------------------------------------------------ */

  --success: var(--brand-green);
  --warning: #F5B544;
  --error:   #FF3B5C;
  --info:    var(--teal);

  /* ------------------------------------------------------------
     COLOR — Strokes & dividers
     ------------------------------------------------------------ */

  --stroke-1: rgba(255, 255, 255, 0.10); /* card borders */
  --stroke-2: rgba(255, 255, 255, 0.20); /* input borders */
  --stroke-3: rgba(255, 255, 255, 0.08); /* section dividers */

  /* ------------------------------------------------------------
     TYPOGRAPHY — Families
     ------------------------------------------------------------ */

  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ------------------------------------------------------------
     TYPOGRAPHY — Type ramp
     Format: size / line-height / weight / tracking
     ------------------------------------------------------------ */

  --t-display-size:    72px;
  --t-display-lh:      1.04;
  --t-display-weight:  800;
  --t-display-track:   -0.03em;

  --t-h1-size:         56px;
  --t-h1-lh:           1.08;
  --t-h1-weight:       800;
  --t-h1-track:        -0.025em;

  --t-h2-size:         40px;
  --t-h2-lh:           1.15;
  --t-h2-weight:       700;
  --t-h2-track:        -0.02em;

  --t-h3-size:         24px;
  --t-h3-lh:           1.3;
  --t-h3-weight:       700;
  --t-h3-track:        -0.01em;

  --t-h4-size:         13px;
  --t-h4-lh:           1.4;
  --t-h4-weight:       600;
  --t-h4-track:        0.12em;
  --t-h4-transform:    uppercase;

  --t-body-lg-size:    20px;
  --t-body-lg-lh:      1.55;
  --t-body-lg-weight:  400;

  --t-body-size:       16px;
  --t-body-lh:         1.6;
  --t-body-weight:     400;

  --t-body-sm-size:    14px;
  --t-body-sm-lh:      1.55;
  --t-body-sm-weight:  400;

  --t-caption-size:    12px;
  --t-caption-lh:      1.5;
  --t-caption-weight:  500;
  --t-caption-track:   0.02em;

  --t-button-size:     15px;
  --t-button-lh:       1;
  --t-button-weight:   600;
  --t-button-track:    -0.005em;

  --t-nav-size:        14px;
  --t-nav-lh:          1;
  --t-nav-weight:      500;

  /* ------------------------------------------------------------
     SPACING — 8px base
     ------------------------------------------------------------ */

  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    12px;
  --space-lg:    16px;
  --space-xl:    24px;
  --space-2xl:   32px;
  --space-3xl:   48px;
  --space-4xl:   64px;
  --space-5xl:   80px;
  --space-6xl:   96px;
  --space-7xl:   128px;

  --section-y:        96px;
  --card-pad:         32px;
  --stat-pad:         24px;
  --max-width:        1440px;
  --gutter-outer:     80px;
  --gutter-column:    24px;

  /* ------------------------------------------------------------
     RADII
     ------------------------------------------------------------ */

  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-full:  9999px;

  /* ------------------------------------------------------------
     ELEVATION — glow over gloss
     ------------------------------------------------------------ */

  --glow-green:  0 0 32px var(--brand-green-glow);
  --glow-teal:   0 0 32px var(--teal-glow);
  --glow-purple: 0 0 32px var(--purple-glow);
  --glow-amber:  0 0 32px var(--amber-glow);
  --glow-soft:   0 0 24px rgba(0, 255, 136, 0.12);

  /* ------------------------------------------------------------
     MOTION
     ------------------------------------------------------------ */

  --ease-out:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* ============================================================
   SEMANTIC TYPE — apply directly to elements
   ============================================================ */

html, body {
  background: var(--bg-primary);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  font-weight: var(--t-body-weight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-lh);
  font-weight: var(--t-h1-weight);
  letter-spacing: var(--t-h1-track);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
  font-weight: var(--t-h2-weight);
  letter-spacing: var(--t-h2-track);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  font-weight: var(--t-h3-weight);
  letter-spacing: var(--t-h3-track);
  color: var(--fg-1);
  margin: 0;
}

h4, .eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-h4-size);
  line-height: var(--t-h4-lh);
  font-weight: var(--t-h4-weight);
  letter-spacing: var(--t-h4-track);
  text-transform: var(--t-h4-transform);
  color: var(--fg-3);
  margin: 0;
}

p {
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0;
}

.lead {
  font-size: var(--t-body-lg-size);
  line-height: var(--t-body-lg-lh);
  color: var(--fg-2);
}

.small {
  font-size: var(--t-body-sm-size);
  line-height: var(--t-body-sm-lh);
  color: var(--fg-3);
}

.caption {
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
  font-weight: var(--t-caption-weight);
  letter-spacing: var(--t-caption-track);
  color: var(--fg-4);
}