/* ============================================================
   AGENT BUILDER — Design Tokens (colors + type)
   AI chatbot / agent-builder platform. Dark, glassy, electric blue.
   Import this file, then use the CSS vars below.
   ============================================================ */

/* Brand typeface is self-hosted from /fonts (Geist, TTF, full weight range).
   Geist = display + body (single brand grotesque). Copy /fonts alongside this
   file if you move it. (Template fonts Sporting Grotesque + DM Sans retired.) */
/* Geist — self-hosted brand font (uploaded). 9 weights × roman + italic. */
@font-face{font-family:"Geist";src:url("fonts/Geist-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist";src:url("fonts/Geist-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist";src:url("fonts/Geist-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist";src:url("fonts/Geist-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Geist";src:url("fonts/Geist-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}

:root {
  /* ---- Brand / core palette (from main.css :root) ---- */
  --ab-primary:        #296aed;  /* electric blue — single accent, used sparingly */
  --ab-primary-marketing: #296aed; /* the .ai-marketing variant, ~identical */
  --ab-secondary:      #00020f;  /* near-black navy — page background */
  --ab-body-bg:        #00020f;  /* alias of secondary */
  --ab-black:          #000000;
  --ab-white:          #ffffff;

  /* ---- Surfaces (derived from component usage) ---- */
  --ab-surface-1:      #060e50;  /* deep indigo — chatbot button / raised pills */
  --ab-surface-2:      #15192f;  /* nav pill / badge background */
  --ab-surface-3:      #2b3d66;  /* dropdown / select list background */
  --ab-surface-input:  #f3f4f5;  /* light form-field fill (inputs are light) */
  --ab-glass:          rgba(255, 255, 255, 0.05); /* glass header / cards */
  --ab-glass-strong:   rgba(255, 255, 255, 0.08);

  /* ---- Text ---- */
  --ab-heading:        #ffffff;  /* all headings are white on dark */
  --ab-fg:             #ffffff;  /* default body text on dark surfaces */
  --ab-fg-muted:       #b2b3b7;  /* secondary / muted gray */
  --ab-fg-dim:         #888686;  /* placeholder / disabled */
  --ab-fg-on-light:    #414047;  /* body text when on a light surface */

  /* ---- Lines & borders ---- */
  --ab-border:         rgba(255, 255, 255, 0.10); /* hairline on dark */
  --ab-border-strong:  rgba(255, 255, 255, 0.18);
  --ab-border-light:   #cbcad3;  /* border on light surfaces */
  --ab-divider-color:  #373946;

  /* ---- Semantic accent on primary ---- */
  --ab-on-primary:     #00020f;  /* text/icon color when sitting on mint */

  /* ---- Gradients ---- */
  /* The signature CTA glow: radial blue fading into the navy. */
  --ab-glow-mint: radial-gradient(120% 180% at 100% 65%,
                    #296aed 0%, rgba(0,2,15,0) 70%);
  /* Ambient page background blobs. */
  --ab-ambient: radial-gradient(40% 40% at 25% 40%, rgba(41,106,237,0.10) 0%, rgba(0,2,15,0) 70%),
                radial-gradient(45% 45% at 80% 55%, rgba(40,90,200,0.14) 0%, rgba(0,2,15,0) 70%);

  /* ---- Typography families ---- */
  --ab-font-display: "Geist", system-ui, sans-serif;             /* headings */
  --ab-font-body:    "Geist", system-ui, sans-serif;             /* everything else */

  /* ---- Type scale (px values pulled from the live CSS) ---- */
  --ab-fs-hero:    72px;  /* hero H1 (scales down on small screens) */
  --ab-fs-display: 62px;  /* big section title (.sec-title .title) */
  --ab-fs-h2-alt:  45px;  /* smaller section title (.sec-title-three) */
  --ab-fs-h2:      32px;
  --ab-fs-h3:      22px;
  --ab-fs-h4:      20px;
  --ab-fs-h5:      18px;
  --ab-fs-h6:      16px;
  --ab-fs-body:    16px;
  --ab-fs-sub:     16px;  /* eyebrow / sub-title */
  --ab-fs-small:   14px;  /* buttons, captions, nav */

  /* ---- Tracking & leading (display type is TIGHT) ---- */
  --ab-track-display: -0.07em; /* headings letter-spacing */
  --ab-track-tight:   -0.08em; /* very large titles */
  --ab-track-body:    -0.01em;
  --ab-leading-head:  1.2;
  --ab-leading-body:  1.75; /* 28px / 16px */

  /* ---- Radii ---- */
  --ab-radius-pill:  100px; /* buttons, chips, header capsule */
  --ab-radius-btn:   50px;
  --ab-radius-card:  24px;  /* feature / pricing cards */
  --ab-radius-sm:    12px;
  --ab-radius-input: 0px;   /* form fields are square in this system */

  /* ---- Elevation / shadows ---- */
  --ab-shadow-card:  0 24px 60px -20px rgba(0, 0, 0, 0.55);
  --ab-shadow-glass: 0 4px 24px -1px rgba(28, 9, 61, 0.20);
  --ab-glow-ring:    0 0 0 1px rgba(41,106,237,0.35), 0 0 24px rgba(41,106,237,0.25);

  /* ---- Motion ---- */
  --ab-ease:        cubic-bezier(0.67, 0.04, 0.30, 0.91);
  --ab-ease-soft:   cubic-bezier(0.215, 0.61, 0.355, 1);
  --ab-dur:         0.3s;
}

/* ============================================================
   Semantic element styles — opt-in via .ab-type scope so they
   never fight a host page. Wrap a region in <div class="ab-type">.
   ============================================================ */
.ab-type {
  font-family: var(--ab-font-body);
  font-size: var(--ab-fs-body);
  line-height: var(--ab-leading-body);
  letter-spacing: var(--ab-track-body);
  color: var(--ab-fg);
  -webkit-font-smoothing: antialiased;
}

.ab-type h1, .ab-display {
  font-family: var(--ab-font-display);
  font-weight: 400;
  font-size: var(--ab-fs-hero);
  line-height: var(--ab-leading-head);
  letter-spacing: var(--ab-track-tight);
  color: var(--ab-heading);
  margin: 0;
}
.ab-type h2 {
  font-family: var(--ab-font-display);
  font-weight: 400;
  font-size: var(--ab-fs-display);
  line-height: var(--ab-leading-head);
  letter-spacing: var(--ab-track-display);
  color: var(--ab-heading);
  margin: 0;
}
.ab-type h3 {
  font-family: var(--ab-font-display);
  font-weight: 400;
  font-size: var(--ab-fs-h3);
  line-height: var(--ab-leading-head);
  letter-spacing: var(--ab-track-display);
  color: var(--ab-heading);
  margin: 0;
}
.ab-type h4 { font-family: var(--ab-font-display); font-weight: 400; font-size: var(--ab-fs-h4); letter-spacing: var(--ab-track-display); color: var(--ab-heading); margin: 0; }
.ab-type h5 { font-family: var(--ab-font-display); font-weight: 400; font-size: var(--ab-fs-h5); letter-spacing: var(--ab-track-display); color: var(--ab-heading); margin: 0; }
.ab-type p  { margin: 0 0 1em; color: var(--ab-fg-muted); }
.ab-type a  { color: var(--ab-primary); text-decoration: none; transition: color var(--ab-dur) var(--ab-ease); }
.ab-type a:hover { color: var(--ab-white); }

/* Eyebrow / sub-title: uppercase with a mint dot or flanking icons. */
.ab-eyebrow {
  font-family: var(--ab-font-body);
  font-size: var(--ab-fs-sub);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--ab-track-body);
  color: var(--ab-white);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ab-eyebrow::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ab-primary);
}