/* Aquiva – Colors & Type tokens
 * Sources: brandbook PDF, brandbook PPTX, and Figma working file.
 *
 * Type system: Lexend for display (1,368 refs in production files), Open Sans
 * for body (2,737 refs). Both are open Google Fonts — fully self-contained.
 */

/* Brand fonts — self-hosted.
 * Lexend (display + heading) — local variable font, weights 100–900.
 * Open Sans (body) — local variable font.
 * JetBrains Mono (code/terminal) — local variable font, weights 100–800. */
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Lexend-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Lexend-VariableFont_wght.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800;
  font-display: swap;
  src: url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800;
  font-display: swap;
  src: url("fonts/OpenSans-VariableFont_wdth,wght.ttf") format("truetype-variations"),
       url("fonts/OpenSans-VariableFont_wdth,wght.ttf") format("truetype"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800;
  font-display: swap;
  src: url("fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations"),
       url("fonts/OpenSans-Italic-VariableFont_wdth,wght.ttf") format("truetype"); }

:root {
  /* ── Brand colors ───────────────────────────────────────────────── */
  /* Primary — used whenever color is used; 50-60% of any composition */
  --aq-blue:            #5A99E6;   /* Cornflower Blue – main brand (1411× in Figma) */
  --aq-blue-alt:        #56ACEF;   /* Figma-dominant blue variant (2278×) */
  --aq-blue-bright:     #0085F2;   /* Bright call-to-action blue (340×) */
  --aq-blue-deep:       #003286;   /* Deep blue (340×) */
  --aq-blue-light:      #CEE0F8;   /* Light Blue – background */
  --aq-blue-bg-soft:    #F3F8FE;   /* Subtle blue tint derived for large fills */
  --aq-blue-pale:       #BBCEFF;   /* Pale blue (472×) */
  --aq-blue-dusk:       #9FAED6;   /* Dusky periwinkle (688×) */

  /* Secondary — 40% of any composition */
  --aq-purple:          #352694;   /* Jackson Purple – additional brand */
  --aq-purple-2:        #362A99;   /* Figma-dominant purple variant (2075×) */
  --aq-purple-warm:     #4F2694;   /* Warm purple (297×) */
  --aq-purple-deep:     #0C1F4F;   /* Deep indigo — hero + footer backgrounds (1594×) */
  --aq-purple-ink:      #1E1273;   /* Purple ink (176×) */
  --aq-purple-midnight: #1D0447;   /* Midnight purple (142×) */
  --aq-violet-light:    #E3E8FD;   /* Light Violet – background */
  --aq-violet-pale:     #CBD3FA;   /* Pale violet (501×) */

  /* Accent — 10-20% max; icons, illustrations, quotes. Never background. */
  --aq-pink:            #E01F6F;   /* Cerise Red – accent */
  --aq-pink-light:      #FDE2EE;   /* Pale pink – pill / tag backgrounds */

  /* Warm accent family — discovered in Figma; used in illustrations & sections */
  --aq-peach:           #F5C7A3;   /* Warm peach – major illustration fill (4728×) */
  --aq-peach-light:     #FFD2A9;   /* Peach tint (490×) */
  --aq-orange:          #ED7F20;   /* Brand orange – illustrations, emphasis (2589×) */
  --aq-cream:           #F9F5F0;   /* Creamy background – featured sections (1288×) */
  --aq-cream-2:         #F8F5F0;   /* Alt cream (136×) */

  /* Neutrals */
  --aq-ink:             #423C4C;   /* Ash Gray – body text */
  --aq-gray:            #737474;   /* Brand gray (logo text) */
  --aq-gray-mid:        #9E9E9E;   /* Header / 4th-5th color */
  --aq-bg:              #F6F7F9;   /* Light Gray – primary background */
  --aq-bg-alt:          #EFEFF4;   /* Alt page bg (194×) */
  --aq-white:           #FFFFFF;
  --aq-black:           #000000;

  /* Signature gradients (blue → purple, purple → pink, warm) */
  --aq-grad-brand:      linear-gradient(135deg, #5A99E6 0%, #352694 100%); /* @kind color */
  --aq-grad-warm:       linear-gradient(135deg, #352694 0%, #E01F6F 100%); /* @kind color */
  --aq-grad-full:       linear-gradient(135deg, #5A99E6 0%, #352694 55%, #E01F6F 100%); /* @kind color */
  --aq-grad-soft-bg:    linear-gradient(135deg, #E3E8FD 0%, #CEE0F8 100%); /* @kind color */
  --aq-grad-deep:       linear-gradient(135deg, #0C1F4F 0%, #352694 100%); /* @kind color */ /* Figma hero */
  --aq-grad-peach:      linear-gradient(135deg, #F5C7A3 0%, #ED7F20 100%); /* @kind color */ /* warm accent */
  --aq-grad-cream:      linear-gradient(180deg, #F9F5F0 0%, #FFFFFF 100%); /* @kind color */ /* subtle section */

  /* Photo filter — apply blue overlay at 60–80% opacity on stock photos */
  --aq-photo-opacity:   0.75; /* @kind other */
  --aq-photo-overlay:   linear-gradient(135deg, rgba(90,153,230,0.55), rgba(53,38,148,0.55)); /* @kind color */

  /* ── Semantic roles ─────────────────────────────────────────────── */
  --fg-1:               var(--aq-ink);         /* primary body text */
  --fg-2:               var(--aq-gray);        /* secondary text */
  --fg-3:               var(--aq-gray-mid);    /* tertiary / captions / headers (4th color) */
  --fg-accent:          var(--aq-blue);
  --fg-accent-strong:   var(--aq-purple);
  --fg-accent-warm:     var(--aq-pink);
  --fg-on-brand:        var(--aq-white);

  --bg-app:             var(--aq-bg);
  --bg-surface:         var(--aq-white);
  --bg-soft-blue:       var(--aq-blue-light);
  --bg-soft-violet:     var(--aq-violet-light);
  --bg-brand:           var(--aq-blue);
  --bg-brand-strong:    var(--aq-purple);

  --border-subtle:      #E7E9EE;
  --border-strong:      #D4D8E0;

  /* ── Dark surfaces ──────────────────────────────────────────────── */
  /* For hero, footer, closing, sapim, agent, and any other dark section.
     Designers were re-deriving these everywhere — formalize once. */
  --surface-dark-1:     var(--aq-purple);          /* primary dark section bg */
  --surface-dark-2:     var(--aq-purple-deep);     /* footer / deepest bg */
  --surface-dark-mid:   #2A1E7A;                   /* between purple and indigo */
  --on-dark-1:          #FFFFFF;                   /* primary text on dark */
  --on-dark-2:          rgba(255,255,255,0.78);    /* secondary text on dark */
  --on-dark-3:          rgba(255,255,255,0.52);    /* tertiary / captions on dark */
  --border-dark:        rgba(255,255,255,0.14);    /* hairlines on dark */
  --border-dark-strong: rgba(255,255,255,0.24);

  /* ── Code / terminal / agent surfaces ───────────────────────────── */
  /* AI-themed sections (terminals, chat, log tails) get their own surface
     family — deeper than the dark hero, with their own state colors. */
  --surface-code:       #0A0620;                   /* agent card / chat bg */
  --surface-code-2:     #060316;                   /* terminal bg, deepest */
  --code-ok:            var(--aq-blue);
  --code-warn:          var(--aq-pink);
  --code-action:        #B396FF;                   /* dispatch / action lines */
  --code-info:          var(--on-dark-3);
  --code-border:        rgba(255,255,255,0.08);
  --code-border-accent: rgba(90,153,230,0.20);     /* blue-tinted hairline */

  /* ── Type — families ────────────────────────────────────────────── */
  /* Verified from brandbook PPTX (Lexend 1,368× / Open Sans 2,737×) and Figma.
     Display — Lexend 300/400/500/600/700/900: headlines, hero text, numerals,
               slide titles. 300/400 for elegant titles, 500/600 for UI headers,
               900 for hero numerals and big statements.
     Body    — Open Sans 400/500/600/700: paragraphs, lists, body copy.
     Mono    — JetBrains Mono for code, terminals, agent UIs, and stage tags. */
  --font-display:       "Lexend", system-ui, sans-serif;
  --font-heading:       "Lexend", system-ui, sans-serif;
  --font-body:          "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:          "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Type scale ─────────────────────────────────────────────────── */
  /* Optimized for mixed web + slide use. Slide headers ≥ 20pt = 26.6px */
  --text-xs:     12px;
  --text-sm:     14px;
  --text-base:   16px;   /* Open Sans body, 10-11pt print */
  --text-md:     18px;
  --text-lg:     20px;   /* Slide subheaders */
  --text-xl:     24px;
  --text-2xl:    32px;
  --text-3xl:    44px;
  --text-4xl:    64px;
  --text-5xl:    96px;   /* Lexend Black big numerals 48–90pt */

  /* line-heights, paired to the scale above */
  --lh-xs:   1.5;   /* @kind font */
  --lh-sm:   1.55;  /* @kind font */
  --lh-base: 1.6;   /* @kind font */
  --lh-md:   1.55;  /* @kind font */
  --lh-lg:   1.45;  /* @kind font */
  --lh-xl:   1.3;   /* @kind font */
  --lh-2xl:  1.2;   /* @kind font */
  --lh-3xl:  1.15;  /* @kind font */
  --lh-4xl:  1.05;  /* @kind font */
  --lh-5xl:  1.0;   /* @kind font */

  --fw-thin:     300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semi:     600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-black:    900; /* @kind font */

  /* tracking – Lexend headlines use loose tracking, esp. all-caps */
  --track-display-caps: 0.08em; /* @kind font */
  --track-heading:      0em;    /* @kind font */
  --track-body:         0em;    /* @kind font */

  /* ── Spacing (4-px base, 8-px grid) ────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ── Radii ──────────────────────────────────────────────────────── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* ── Shadows ────────────────────────────────────────────────────── */
  /* Brand uses soft, diffuse, bluish shadows. Never harsh black. */
  --shadow-xs: 0 1px 2px rgba(53, 38, 148, 0.06);
  --shadow-sm: 0 2px 6px rgba(53, 38, 148, 0.08);
  --shadow-md: 0 8px 24px rgba(53, 38, 148, 0.10);
  --shadow-lg: 0 16px 40px rgba(53, 38, 148, 0.14);
  --shadow-focus: 0 0 0 3px rgba(90, 153, 230, 0.35);

  /* Dark-surface shadow exception — purple-tinted shadows disappear on
     purple backgrounds, so dark cards (agent UIs, terminals, overlays) use
     deep neutral shadows instead. */
  --shadow-dark-md: 0 24px 60px -20px rgba(0, 0, 0, 0.50);
  --shadow-dark-lg: 0 50px 100px -30px rgba(0, 0, 0, 0.70);

  /* ── Motion ─────────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);  /* @kind other */
  --dur-fast:      150ms; /* @kind other */
  --dur-base:      220ms; /* @kind other */
  --dur-slow:      360ms; /* @kind other */
}

/* ── Base ───────────────────────────────────────────────────────── */
html, body {
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

/* ── Semantic type roles ────────────────────────────────────────── */
/* Hero / headline (Lexend) – big marketing text */
.aq-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-5xl);
  line-height: var(--lh-5xl);
  letter-spacing: -0.015em;
  color: var(--fg-1);
}

/* H1 – page title.
 * NOTE on color: the bare element selectors set font/size only and inherit color.
 * Use `.aq-h1` (or equivalent inline style) when you want the default ash-gray color.
 * This lets headings on gradient heroes inherit `color: white` from their section. */
h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  letter-spacing: -0.01em;
}
.aq-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

/* H2 – section */
h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  letter-spacing: -0.005em;
}
.aq-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  letter-spacing: -0.005em;
  color: var(--fg-accent);
}

/* H3 */
h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
}
.aq-h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  color: var(--fg-1);
}

/* H4 */
h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
}
.aq-h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semi);
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  color: var(--fg-1);
}

/* Eyebrow / overline – small all-caps labels (brand uses these a lot) */
.aq-eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);
  line-height: 1.2;
  letter-spacing: var(--track-display-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Big numbers / stats – Lexend Light 72–96 pt, matching .aq-bignum and the
 * numerals specimen. (Previously Black 900 — too heavy; the brand's numeral
 * treatment is light and airy.) */
.aq-number {
  font-family: var(--font-heading);
  font-weight: var(--fw-thin);
  font-size: var(--text-5xl);
  line-height: 1;
  color: var(--fg-accent);
  letter-spacing: -0.025em;
}

/* Pull quote – Lexend Black 48-90pt for quotation marks */
.aq-quote {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-2xl);
  line-height: 1.35;
  color: var(--fg-1);
  text-wrap: pretty;
}
.aq-quote::before { content: "\201C"; color: var(--fg-accent); font-size: 1.6em; line-height: 0; vertical-align: -0.15em; margin-right: 0.1em; font-weight: var(--fw-black); }

/* Body text — inherits color, so paragraphs on dark backgrounds pick up
 * their section's white/light color without needing an override. */
p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  text-wrap: pretty;
}
.aq-p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg-1);
  text-wrap: pretty;
}

/* Body lead – slightly larger intro paragraph */
.aq-lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--fg-2);
}

/* Caption / meta — `small` inherits color; `.aq-caption` forces muted gray. */
small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.aq-caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-3);
}

/* Inline code / mono */
code, .aq-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--aq-violet-light);
  color: var(--aq-purple);
  padding: 0.12em 0.4em;
  border-radius: var(--r-xs);
}

/* Links — no forced color so links on dark heros inherit the section color.
 * Use `.aq-link` when you want the default blue accent. */
a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-standard), opacity var(--dur-fast);
}
.aq-link {
  color: var(--fg-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-standard), opacity var(--dur-fast);
}
a:hover, .aq-link:hover { border-bottom-color: currentColor; }
a:active, .aq-link:active { opacity: 0.8; }

/* ── Headline accent ─────────────────────────────────────────────── */
/* Brand rule: emphasis inside a headline is set in cerise pink, never
 * italic. Use `<em>` inside any heading and it picks this up automatically;
 * apply `.aq-h-accent` to a span when the markup can't use <em>.
 * Keep to ONE accented phrase per headline — the pink budget is tight.    */
h1 em, h2 em, h3 em, h4 em,
.aq-h1 em, .aq-h2 em, .aq-h3 em, .aq-h4 em,
.aq-hero em,
.aq-h-accent {
  font-style: normal;
  color: var(--aq-pink);
  font-weight: var(--fw-medium);
}
/* On dark surfaces the accent stays pink — the contrast is intentional. */

/* ── Buttons ─────────────────────────────────────────────────────── */
/* Pill buttons. Use `*-on-dark` variants on dark sections so designers
 * stop re-deriving them per page.                                       */
.aq-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  font-family: var(--font-body); font-weight: var(--fw-semi);
  font-size: 13.5px; letter-spacing: 0.02em; line-height: 1;
  border: 1.5px solid transparent; border-radius: var(--r-pill);
  cursor: pointer; transition: all var(--dur-fast) var(--ease-standard);
}
.aq-btn-primary { background: var(--aq-blue); color: var(--on-dark-1); }
.aq-btn-primary:hover { background: var(--aq-purple); }
.aq-btn-ghost { background: transparent; color: var(--fg-1); border-color: var(--border-strong); }
.aq-btn-ghost:hover { border-color: var(--aq-blue); color: var(--aq-purple); }
/* On dark sections — invert primary, lighten ghost. */
.aq-btn-primary-on-dark { background: var(--on-dark-1); color: var(--aq-purple); }
.aq-btn-primary-on-dark:hover { background: var(--aq-blue-light); }
.aq-btn-ghost-on-dark { background: transparent; color: var(--on-dark-1); border-color: var(--border-dark); }
.aq-btn-ghost-on-dark:hover { border-color: var(--on-dark-1); background: rgba(255,255,255,0.08); }

/* ── Terminal / agent surface recipe ─────────────────────────────── */
/* Apply to wrapper for AI-themed code surfaces. Pairs with --code-* tokens. */
.aq-terminal,
.aq-agent-card {
  background: var(--surface-code);
  border: 1px solid var(--code-border);
  border-radius: var(--r-md);
  overflow: hidden;
  font-family: var(--font-body);
  color: var(--on-dark-1);
  box-shadow: var(--shadow-dark-lg), 0 0 0 1px var(--code-border-accent);
}
.aq-terminal { background: var(--surface-code-2); font-family: var(--font-mono); font-size: 12px; line-height: 1.7; }
/* Log-line state colors — use as inline `color` on level/severity tags. */
.aq-code-ok     { color: var(--code-ok);     font-weight: var(--fw-semi); }
.aq-code-warn   { color: var(--code-warn);   font-weight: var(--fw-semi); }
.aq-code-action { color: var(--code-action); font-weight: var(--fw-semi); }
.aq-code-info   { color: var(--code-info); }