/* ============================================================
   Asymptotic — Foundations: Colors & Typography
   ============================================================
   Dark-themed system. Brand black is #1C1C1E and brand blue is
   #1155CC. Typography is IBM Plex Sans (UI/body) with IBM Plex
   Mono for code and IBM Plex Serif used sparingly for editorial
   moments. The system is built around a charcoal canvas and a
   precise, technical-feeling type scale.
   ============================================================ */

/* IBM Plex Sans / Mono / Serif — loaded from Google Fonts.
   See fonts/README.md for self-hosted swap instructions. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Serif:wght@400;500;600&display=swap");

:root {
  /* ---------- Brand ---------- */
  --brand-black: #1C1C1E;       /* canonical brand black */
  --brand-blue:  #1155CC;        /* canonical brand blue */
  --brand-blue-light: #4F86E8;   /* logo gradient highlight */
  --brand-blue-pale:  #A8C2F2;   /* logo gradient tail */

  /* ---------- Neutrals (dark-first ramp) ---------- */
  --n-0:  #0A0A0B;   /* deepest — page background option */
  --n-50: #121214;
  --n-100: #1C1C1E;  /* brand black — default canvas */
  --n-200: #232326;
  --n-300: #2C2C30;
  --n-400: #3A3A3F;
  --n-500: #54545B;
  --n-600: #7A7A82;
  --n-700: #A0A0A8;
  --n-800: #C8C8CE;
  --n-900: #E8E8EC;
  --n-1000: #FFFFFF;

  /* ---------- Blue scale (built around #1155CC) ---------- */
  --blue-50:  #0B1E3D;
  --blue-100: #0F2C58;
  --blue-200: #103D85;
  --blue-300: #1148AB;
  --blue-400: #1155CC;   /* brand */
  --blue-500: #2E6FE0;
  --blue-600: #5C90EA;
  --blue-700: #8FB3F1;
  --blue-800: #C2D4F8;
  --blue-900: #E6EEFC;

  /* ---------- Semantic — surfaces ---------- */
  --bg:           var(--n-100);  /* app canvas */
  --bg-deep:      var(--n-0);    /* full-bleed sections / hero */
  --bg-elev-1:    var(--n-200);  /* card */
  --bg-elev-2:    var(--n-300);  /* popover / nested card */
  --bg-elev-3:    var(--n-400);  /* tooltip / hover surface */
  --bg-inset:     var(--n-50);   /* code blocks, wells */

  /* ---------- Semantic — foreground ---------- */
  --fg-1: var(--n-1000);  /* primary text */
  --fg-2: var(--n-800);   /* secondary text */
  --fg-3: var(--n-700);   /* tertiary / metadata */
  --fg-4: var(--n-600);   /* quaternary / placeholder */
  --fg-disabled: var(--n-500);
  --fg-on-blue: #FFFFFF;

  /* ---------- Semantic — 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-focus:   var(--blue-500);

  /* ---------- Semantic — accent ---------- */
  --accent:        var(--blue-400);
  --accent-hover:  var(--blue-500);
  --accent-press:  var(--blue-300);
  --accent-soft:   rgba(17,85,204,0.14);
  --accent-on:     #FFFFFF;

  /* ---------- Status ---------- */
  --success:    #2EB67D;
  --success-bg: rgba(46,182,125,0.14);
  --warning:    #E0A23A;
  --warning-bg: rgba(224,162,58,0.14);
  --danger:     #E5484D;
  --danger-bg:  rgba(229,72,77,0.14);
  --info:       var(--blue-500);
  --info-bg:    var(--accent-soft);

  /* ---------- Charting (battery / physics telemetry) ---------- */
  --chart-1: #1155CC;
  --chart-2: #4F86E8;
  --chart-3: #A8C2F2;
  --chart-4: #2EB67D;
  --chart-5: #E0A23A;
  --chart-6: #E5484D;
  --chart-7: #9B6BFF;
  --chart-grid: rgba(255,255,255,0.06);

  /* ---------- Type families ---------- */
  --font-sans:  "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-serif: "IBM Plex Serif", ui-serif, Georgia, "Times New Roman", serif;

  /* ---------- Type scale (px) ---------- */
  --fs-display-2xl: 80px;
  --fs-display-xl:  64px;
  --fs-display-lg:  48px;
  --fs-h1: 40px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-h5: 17px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro:   11px;

  /* ---------- Line heights ---------- */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  /* ---------- Tracking ---------- */
  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-body:    0;
  --ls-eyebrow: 0.12em;
  --ls-mono:    0;

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

  /* ---------- Spacing scale (4px grid) ---------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 120px;

  /* ---------- Radii ---------- */
  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;   /* default for inputs / buttons */
  --r-lg:   10px;  /* cards */
  --r-xl:   16px;  /* feature cards / modals */
  --r-2xl:  24px;
  --r-pill: 999px;

  /* ---------- Shadows (used sparingly on dark) ---------- */
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 12px rgba(0,0,0,0.5);
  --shadow-3: 0 1px 0 rgba(255,255,255,0.06) inset, 0 16px 40px rgba(0,0,0,0.55);
  --shadow-glow-blue: 0 0 0 1px rgba(17,85,204,0.45), 0 8px 28px rgba(17,85,204,0.35);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 500ms;

  /* ---------- Layout ---------- */
  --container: 1200px;
  --container-narrow: 880px;
}

/* ============================================================
   Base / element-level type
   ============================================================ */
html { color-scheme: dark; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}
h2, .h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: var(--fw-semibold);
}
h3, .h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}
h4, .h4 {
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}
h5, .h5 {
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
}

p { margin: 0 0 1em; color: var(--fg-2); }
small, .caption { font-size: var(--fs-caption); color: var(--fg-3); }

.display-2xl { font-size: var(--fs-display-2xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); }
.display-xl  { font-size: var(--fs-display-xl);  line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); }
.display-lg  { font-size: var(--fs-display-lg);  line-height: var(--lh-tight); letter-spacing: var(--ls-display); font-weight: var(--fw-semibold); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: var(--fw-medium);
}

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

pre, .code-block {
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  overflow: auto;
  color: var(--fg-2);
}

a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; }

hr { border: 0; border-top: 1px solid var(--border-default); margin: var(--sp-7) 0; }

::selection { background: var(--accent); color: #fff; }