/* ============================================================
   Khalid Rashad — Colors & Type
   Design system CSS variables + base type + semantic helpers
   ============================================================ */

/* Fonts are loaded from Google Fonts CDN.
   Substitutions flagged to the user:
   - Display/UI sans:     Geist (closest to modern technical sans; alt: Inter)
   - Monospace:           JetBrains Mono (technical, developer-first)
   - Numeric display:     Geist Mono for inline numerals and tags
*/
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ============================================================
     COLOR SYSTEM
     Dark-first, developer-console inspired. Neutrals are cool-grey
     with a slight blue cast to harmonize with the electric accent.
     ============================================================ */

  /* Brand / accent — kept from existing portfolio */
  --brand:           #0078ff;
  --brand-hi:        #3e97ff;   /* hover / highlighted */
  --brand-lo:        #005ecc;   /* pressed / deep */
  --brand-ink:       #ffffff;   /* text on brand */
  --brand-tint:      rgba(0, 120, 255, 0.10);
  --brand-ring:      rgba(0, 120, 255, 0.28);

  /* Signal / semantic */
  --ok:              #2ecc71;
  --warn:            #f5a623;
  --err:             #ff5d5d;
  --info:            var(--brand);

  /* Neutrals — dark canvas */
  --bg:              #0b0d10;   /* app background */
  --bg-1:            #111418;   /* surface 1 (card) */
  --bg-2:            #171b20;   /* surface 2 (raised) */
  --bg-3:            #1d2229;   /* surface 3 (menu, modal) */
  --bg-inv:          #f6f7f8;   /* inverse (light mode card) */

  /* Foreground */
  --fg:              #e7ebf0;   /* primary text */
  --fg-1:            #b7bfc8;   /* secondary text */
  --fg-2:            #7e8691;   /* tertiary / meta */
  --fg-3:            #525962;   /* quaternary / disabled */
  --fg-inv:          #0b0d10;   /* text on light surfaces */

  /* Lines & borders */
  --line:            #22272e;
  --line-hi:         #2d333b;   /* emphasized border */
  --line-lo:         #1a1e23;   /* subtle border */

  /* Syntax / code colors (used in code samples and as accents) */
  --syn-keyword:     #c792ea;
  --syn-string:      #c3e88d;
  --syn-number:      #f78c6c;
  --syn-func:        #82aaff;
  --syn-comment:     #6b7280;
  --syn-tag:         #ff5370;

  /* Shadows / elevation (on dark) */
  --shadow-0:        none;
  --shadow-1:        0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2:        0 6px 16px rgba(0, 0, 0, 0.40), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-3:        0 18px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.40);
  --glow-brand:      0 0 0 1px rgba(0, 120, 255, 0.45), 0 8px 30px rgba(0, 120, 255, 0.25);

  /* Radii */
  --r-0:             0px;
  --r-1:             4px;      /* chips, tight */
  --r-2:             8px;      /* default controls */
  --r-3:             12px;     /* cards */
  --r-4:             16px;     /* large cards */
  --r-pill:          999px;

  /* Spacing scale (8pt grid with halves) */
  --s-0:             0;
  --s-1:             4px;
  --s-2:             8px;
  --s-3:             12px;
  --s-4:             16px;
  --s-5:             24px;
  --s-6:             32px;
  --s-7:             48px;
  --s-8:             64px;
  --s-9:             96px;
  --s-10:            128px;

  /* Layout */
  --container:       1200px;
  --container-wide:  1440px;
  --gutter:          24px;

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans:       'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:       'JetBrains Mono', 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-display:    'Geist', sans-serif;

  /* Type scale — modular, slightly tight on tracking for a technical feel */
  --fs-12:           12px;
  --fs-13:           13px;
  --fs-14:           14px;
  --fs-15:           15px;
  --fs-16:           16px;
  --fs-18:           18px;
  --fs-20:           20px;
  --fs-24:           24px;
  --fs-32:           32px;
  --fs-40:           40px;
  --fs-48:           48px;
  --fs-64:           64px;
  --fs-80:           80px;

  --lh-tight:        1.1;
  --lh-snug:         1.25;
  --lh-body:         1.55;
  --lh-loose:        1.7;

  --tr-tight:        -0.02em;
  --tr-snug:         -0.01em;
  --tr-body:         0;
  --tr-wide:         0.02em;
  --tr-mono:         0;

  /* Motion */
  --ease-out:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:     cubic-bezier(0.6, 0.05, 0.2, 0.95);
  --dur-fast:        120ms;
  --dur-base:        180ms;
  --dur-slow:        320ms;
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
}

/* Semantic text helpers */
h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, var(--fs-80));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, var(--fs-48));
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}

h4, .h4 {
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}

h5, .h5 {
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  font-weight: 600;
  color: var(--fg);
  margin: 0;
}

h6, .h6, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-2);
  margin: 0;
}

p, .p {
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0;
}

.lead {
  font-size: var(--fs-20);
  line-height: var(--lh-body);
  color: var(--fg);
  letter-spacing: var(--tr-snug);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--fg-2);
  letter-spacing: var(--tr-mono);
}

small, .small {
  font-size: var(--fs-13);
  color: var(--fg-2);
}

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

code {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: var(--r-1);
  color: var(--fg);
}

a {
  color: var(--brand);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

a:hover { color: var(--brand-hi); }

/* Selection */
::selection { background: var(--brand); color: var(--brand-ink); }

/* Focus */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* Utility */
.mono-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  padding: 4px 8px;
  border-radius: var(--r-1);
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--fg-1);
}

.mono-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

/* Grid background — used on hero & feature surfaces */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
}

.dot-bg {
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 16px 16px;
}