/* =========================================================
   TEO Design System — colors_and_type.css
   Source of truth: kickoff spec (verbatim CSS custom props).
   Font: IBM Plex Sans — loaded from Google Fonts.
   If you vendor the TTFs, drop into fonts/ and swap @import.
   ========================================================= */

/* IBM Plex Sans + Plex Mono via Google Fonts (CDN — no local TTF dependency). */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Core palette ---------- */
  --teo-dark:          #0A0F1F;   /* primary background (dark), headline text, primary CTA bg */
  --teo-secondary:     #11172B;   /* secondary dark sections, dark cards */
  --teo-body:          #242739;   /* body text default, nav text, subtle dark elements */
  --teo-accent:        #3A6FF8;   /* brand blue accent, H5 labels, CTA section bg */
  --teo-accent-dark:   #23459E;   /* accent hover / darker variant */
  --teo-accent-light:  #7A9CFF;   /* elevated accent for CTAs + touchpoints on dark */
  --teo-white:         #FFFFFF;

  /* Alpha whites (frosted tags, borders on dark) */
  --teo-white-a16:     rgba(255,255,255,0.16);
  --teo-white-a30:     rgba(255,255,255,0.30);
  --teo-white-a08:     rgba(255,255,255,0.08);

  /* Light-mode surfaces & borders */
  --teo-border:        #EBEBEB;
  --teo-border-input:  #878787;
  --teo-border-light:  #E6E9EC;
  --teo-divider:       #EDEDED;

  /* ---------- Semantic foreground / background ---------- */
  --fg-1:              var(--teo-dark);     /* headlines on light */
  --fg-2:              var(--teo-body);     /* body on light */
  --fg-3:              #5A5E6E;             /* muted on light */
  --fg-invert:         var(--teo-white);    /* on dark surfaces */
  --fg-accent:         var(--teo-accent);

  --bg-1:              var(--teo-white);
  --bg-2:              #F6F7F9;             /* light mode alt surface */
  --bg-3:              #EEF0F3;
  --bg-dark-1:         var(--teo-dark);
  --bg-dark-2:         var(--teo-secondary);
  --bg-dark-3:         var(--teo-body);

  /* Hero gradient (used on marketing hero) */
  --teo-hero-gradient: radial-gradient(at 50% 0%, #0F162D 0%, #070B16 100%);

  /* ---------- Type ---------- */
  --font-sans:   "IBM Plex Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Desktop scale (verbatim from spec) */
  --h1-size: 60px;  --h1-weight: 300; --h1-line: 1.1em;  --h1-track: -0.08em;  --h1-color: var(--teo-white);
  --h2-size: 34px;  --h2-weight: 400; --h2-line: 1.3em;  --h2-track: -0.04em;  --h2-color: var(--teo-dark);
  --h3-size: 21px;  --h3-weight: 400; --h3-line: 1.4em;  --h3-track: 0;        --h3-color: var(--teo-dark);
  --h4-size: 24px;  --h4-weight: 400; --h4-line: 1.4em;  --h4-track: 0;        --h4-color: var(--teo-dark);
  --h5-size: 15px;  --h5-weight: 400; --h5-line: 1.4em;  --h5-track: 0;        --h5-color: var(--teo-accent);
  --h6-size: 13px;  --h6-weight: 400; --h6-line: 1.2em;  --h6-track: -0.027em; --h6-color: var(--teo-dark);
  --p-size:  15px;  --p-weight:  400; --p-line:  1.5em;  --p-track:  0;        --p-color:  var(--teo-body);

  /* Eyebrow / category tag (H5 on dark variant) */
  --eyebrow-size: 12px;
  --eyebrow-track: 0.6px;
  --eyebrow-transform: uppercase;

  /* Nav */
  --nav-font-size: 16px;
  --nav-track:     0.02em;

  /* ---------- Spacing scale (8pt-ish, verbatim) ---------- */
  --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-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --space-25: 100px;

  /* ---------- Layout ---------- */
  --container-max: 1320px;
  --content-max:   1150px;
  --column-gap:    40px;

  /* ---------- Radius ---------- */
  --radius-ui: 0px;       /* default UI — buttons, inputs, cards */
  --radius-sm: 0px;
  --radius-pill: 100px;   /* tags only */
  --radius-circle: 750px; /* decorative marks */

  /* ---------- Elevation ---------- */
  --shadow-hairline: rgba(135,135,135,0.24) 0 0 0 1px;
  --shadow-card:     rgba(35,35,35,0.10) 0 0 30px 0;
  --shadow-focus:    0 0 0 2px rgba(58,111,248,0.35);

  /* ---------- Motion ---------- */
  --ease-teo:      cubic-bezier(0.68, 0.01, 0.58, 0.75);
  --dur-fast:      0.2s;
  --dur-standard:  0.3s;
  --transition-default: 0.2s var(--ease-teo);
}

/* Mobile overrides — ≤767px */
@media (max-width: 767px) {
  :root {
    --h1-size: 40px;
    --h2-size: 26px;
    --h3-size: 20px;
    --h4-size: 20px;
    --h5-size: 14px;
    --h6-size: 12px;
    --p-size:  14px;
  }
}

/* =========================================================
   Semantic element styles — import + opt-in via class="teo"
   ========================================================= */
.teo, .teo-surface, body.teo {
  font-family: var(--font-sans);
  color: var(--fg-2);
  font-size: var(--p-size);
  line-height: var(--p-line);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.teo h1, .teo .h1 {
  font: var(--h1-weight) var(--h1-size)/var(--h1-line) var(--font-sans);
  letter-spacing: var(--h1-track);
  color: var(--h1-color);
  margin: 0;
}
.teo h2, .teo .h2 {
  font: var(--h2-weight) var(--h2-size)/var(--h2-line) var(--font-sans);
  letter-spacing: var(--h2-track);
  color: var(--h2-color);
  margin: 0;
}
.teo h3, .teo .h3 {
  font: var(--h3-weight) var(--h3-size)/var(--h3-line) var(--font-sans);
  letter-spacing: var(--h3-track);
  color: var(--h3-color);
  margin: 0;
}
.teo h4, .teo .h4 {
  font: var(--h4-weight) var(--h4-size)/var(--h4-line) var(--font-sans);
  letter-spacing: var(--h4-track);
  color: var(--h4-color);
  margin: 0;
}
.teo h5, .teo .h5 {
  font: var(--h5-weight) var(--h5-size)/var(--h5-line) var(--font-sans);
  letter-spacing: var(--h5-track);
  color: var(--h5-color);
  margin: 0;
}
.teo h6, .teo .h6 {
  font: var(--h6-weight) var(--h6-size)/var(--h6-line) var(--font-sans);
  letter-spacing: var(--h6-track);
  text-transform: uppercase;
  color: var(--h6-color);
  margin: 0;
}
.teo p, .teo .p {
  font: var(--p-weight) var(--p-size)/var(--p-line) var(--font-sans);
  letter-spacing: var(--p-track);
  color: var(--p-color);
  margin: 0;
}

.teo .eyebrow {
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-track);
  text-transform: var(--eyebrow-transform);
  font-weight: 400;
  color: var(--teo-accent);
}

/* =========================================================
   Components
   ========================================================= */
.teo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 24px;
  border-radius: var(--radius-ui);
  font: 400 15px/1 var(--font-sans);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: var(--transition-default);
  border: 1px solid transparent;
  background: transparent;
  white-space: nowrap;
}
.teo-btn--primary   { background: var(--teo-dark); color: var(--teo-white); border-color: var(--teo-white-a30); }
.teo-btn--primary:hover { background: #000; }
.teo-btn--ghost     { background: var(--teo-white); color: var(--teo-dark); border-color: var(--teo-dark); }
.teo-btn--ghost:hover { background: var(--teo-dark); color: var(--teo-white); }
.teo-btn--nav       { padding: 8px 14px; font-size: 13px; background: var(--teo-dark); color: var(--teo-white); border-color: var(--teo-dark); }
.teo-btn--inline    { padding: 10px 16px; background: transparent; color: var(--teo-dark); border: none; }
.teo-btn--accent    { background: var(--teo-accent); color: var(--teo-white); border-color: var(--teo-accent); }
.teo-btn--accent:hover { background: var(--teo-accent-dark); border-color: var(--teo-accent-dark); }

.teo-input {
  background: transparent;
  border: 1px solid var(--teo-border-input);
  border-radius: var(--radius-ui);
  color: var(--teo-dark);
  padding: 13px 24px;
  font: 400 16px var(--font-sans);
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-teo);
}
.teo-input:focus { outline: none; border-color: var(--teo-dark); }

.teo-tag {
  display: inline-block;
  background: var(--teo-white-a16);
  border: 1px solid var(--teo-white);
  border-radius: var(--radius-pill);
  padding: 4px 10px 3px;
  font: 400 15px var(--font-sans);
  color: var(--teo-white);
}
.teo-tag--light {
  background: rgba(10,15,31,0.04);
  border-color: var(--teo-dark);
  color: var(--teo-dark);
}

.teo-divider { height: 1px; background: var(--teo-divider); border: 0; }
.teo-divider--dark { background: var(--teo-white-a30); }