/* ==========================================================================
   AI Compass — Colors & Type Foundation
   Navigate. Strategize. Accelerate.
   ========================================================================== */

/* Type: Manrope is the brand typeface. Loaded from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND COLOR PALETTE (from Brand Logo Book) ---------- */
  --ac-red:             #E31B23;   /* AI Compass Red — signal, CTA, action */
  --ac-red-hot:         #FF2A33;   /* Hover/hot state of red */
  --ac-red-deep:        #B81218;   /* Pressed state */
  --ac-red-glow:        rgba(227, 27, 35, 0.35);

  --ac-charcoal:        #0B0D10;   /* Deep Charcoal — primary dark surface */
  --ac-graphite:        #2A2E33;   /* Metallic Graphite — cards on dark */
  --ac-graphite-hi:     #3A3F46;   /* Elevated graphite */
  --ac-steel:           #7A828C;   /* Steel Grey — secondary text on dark */
  --ac-steel-soft:      #A8B0BA;   /* Muted text */
  --ac-mist:            #D6DAE0;   /* Divider on light */
  --ac-fog:             #EEF1F4;   /* Subtle light surface */
  --ac-white:           #FFFFFF;

  /* ---------- SEMANTIC SURFACES — DARK (default brand context) ---------- */
  --bg-base:            var(--ac-charcoal);
  --bg-raised:          #14171B;
  --bg-card:            var(--ac-graphite);
  --bg-card-hi:         var(--ac-graphite-hi);
  --bg-inset:           #070809;

  /* ---------- SEMANTIC SURFACES — LIGHT ---------- */
  --bg-base-light:      var(--ac-white);
  --bg-raised-light:    var(--ac-fog);
  --bg-card-light:      var(--ac-white);

  /* ---------- FOREGROUNDS ---------- */
  --fg1:                var(--ac-white);          /* Primary on dark */
  --fg2:                var(--ac-steel-soft);     /* Secondary on dark */
  --fg3:                var(--ac-steel);          /* Tertiary on dark */
  --fg-inverse:         var(--ac-charcoal);       /* Primary on light */
  --fg-inverse-2:       #3A3F46;
  --fg-inverse-3:       #6B737D;

  /* ---------- ACCENTS / STATE ---------- */
  --accent:             var(--ac-red);
  --accent-hover:       var(--ac-red-hot);
  --accent-press:       var(--ac-red-deep);
  --focus-ring:         rgba(227, 27, 35, 0.55);

  --success:            #2BD67B;
  --warning:            #FFB020;
  --danger:             var(--ac-red);
  --info:               #4DA3FF;

  /* ---------- BORDERS ---------- */
  --border-subtle:      rgba(255, 255, 255, 0.06);
  --border-default:     rgba(255, 255, 255, 0.10);
  --border-strong:      rgba(255, 255, 255, 0.18);
  --border-light:       rgba(11, 13, 16, 0.08);
  --border-light-strong:rgba(11, 13, 16, 0.15);

  /* ---------- ELEVATION / SHADOWS ---------- */
  /* On dark: shadows are deep blacks + a subtle red rim for CTAs */
  --shadow-sm:          0 1px 2px rgba(0,0,0,0.35);
  --shadow-md:          0 6px 18px rgba(0,0,0,0.45);
  --shadow-lg:          0 20px 48px rgba(0,0,0,0.55);
  --shadow-xl:          0 32px 80px rgba(0,0,0,0.65);
  --shadow-red:         0 8px 24px rgba(227, 27, 35, 0.28), 0 0 0 1px rgba(227,27,35,0.35) inset;
  --shadow-red-glow:    0 0 0 1px rgba(227,27,35,0.45), 0 0 32px rgba(227,27,35,0.35);
  --shadow-inner-rim:   inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.4);

  /* ---------- RADII ---------- */
  --radius-xs:          4px;
  --radius-sm:          6px;
  --radius-md:          10px;
  --radius-lg:          14px;
  --radius-xl:          20px;
  --radius-2xl:         28px;
  --radius-pill:        999px;

  /* ---------- SPACING (4px base) ---------- */
  --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;

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

  /* Scale — 1.25 ratio, tuned for dense product UI + confident headlines */
  --text-xs:    12px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   44px;
  --text-4xl:   60px;
  --text-5xl:   80px;

  --leading-tight:  1.08;
  --leading-snug:   1.22;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.18em;   /* The signature hairline-spaced small caps */

  /* ---------- MOTION ---------- */
  --ease-out:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:       120ms;
  --dur-base:       200ms;
  --dur-slow:       360ms;
  --dur-scene:      700ms;

  /* ---------- GRADIENTS / BRAND FX ---------- */
  --grad-dark-flow:    radial-gradient(120% 90% at 50% 0%, #1b1e24 0%, #0B0D10 55%, #050607 100%);
  --grad-red-bar:      linear-gradient(90deg, #FF2A33 0%, #E31B23 55%, #8A0E14 100%);
  --grad-red-rim:      linear-gradient(180deg, rgba(227,27,35,0.0) 0%, rgba(227,27,35,0.55) 100%);
  --grad-steel:        linear-gradient(180deg, #3A3F46 0%, #1F2328 100%);
  --grad-protect-top:  linear-gradient(180deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
  --grad-protect-btm:  linear-gradient(0deg,   rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
}

/* =========================================================================
   SEMANTIC TYPE CLASSES
   ========================================================================= */

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg1);
  background: var(--bg-base);
  font-feature-settings: "ss01", "cv11";
}

.display, h1.display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h2, .h2 {
  font-weight: 700;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h3, .h3 {
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
}

h4, .h4 {
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

h5, .h5 {
  font-weight: 600;
  font-size: var(--text-md);
  line-height: var(--leading-snug);
}

.eyebrow, .overline {
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--accent);
}

.eyebrow--mute {
  color: var(--fg3);
}

p, .p {
  font-size: var(--text-base);
  line-height: var(--leading-loose);
  color: var(--fg2);
}

.lede {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--fg1);
  font-weight: 400;
}

small, .small {
  font-size: var(--text-sm);
  color: var(--fg3);
}

code, .code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.dot-separator::before {
  content: "•";
  margin: 0 0.6em;
  color: var(--accent);
}

/* Signature brand caps (e.g. NAVIGATE • STRATEGIZE • ACCELERATE) */
.tagline {
  font-weight: 500;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg2);
}
.tagline .sep {
  color: var(--accent);
  margin: 0 0.8em;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

::selection { background: var(--accent); color: var(--ac-white); }

/* Utility accents */
.accent-text { color: var(--accent); }
.red-underline {
  position: relative;
  padding-bottom: 4px;
}
.red-underline::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 48px; height: 2px;
  background: var(--grad-red-bar);
}