/* AI on Tap design tokens. Brand palette and type from the brand guide. */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-display: swap; src: url("../fonts/BricolageGrotesque-700.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-display: swap; src: url("../fonts/BricolageGrotesque-800.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("../fonts/Figtree-400.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("../fonts/Figtree-600.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url("../fonts/Figtree-700.woff2") format("woff2"); }
:root {
  /* Palette */
  --aot-stout: #1C231E;
  --aot-stout-2: #242D27;
  --aot-foam: #F4EAD2;
  --aot-cream: #FFF8E1;
  --aot-ink: #262D22;
  --aot-amber: #E8A33D;
  --aot-teal: #95C9B9;
  --aot-tomato: #D43F28;
  --aot-orange: #E38E2C;
  --aot-chestnut: #6A421B;
  --aot-neon: #3DFF8F; /* AI glow details only, never text */
  --aot-muted-dark: #C9BFA6;
  --aot-muted-light: #5A554A;

  /* Type */
  --aot-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --aot-font-body: "Figtree", system-ui, sans-serif;
  --aot-size-hero: clamp(3.25rem, 11vw, 7.5rem);
  --aot-size-h1: clamp(2.25rem, 6vw, 3.75rem);
  --aot-size-h2: clamp(1.6rem, 4vw, 2.25rem);
  --aot-size-lead: clamp(1.15rem, 2.4vw, 1.4rem);
  --aot-size-body: 1.0625rem;
  --aot-size-small: 0.9rem;

  /* Space and shape */
  --aot-space-1: 0.5rem;
  --aot-space-2: 1rem;
  --aot-space-3: 1.5rem;
  --aot-space-4: 2.5rem;
  --aot-space-5: 4rem;
  --aot-space-6: 6rem;
  --aot-radius: 14px;
  --aot-radius-pill: 999px;
  --aot-outline: 3px;

  /* Dark (stout) theme is the default */
  --bg: var(--aot-stout);
  --surface: var(--aot-stout-2);
  --text: var(--aot-foam);
  --muted: var(--aot-muted-dark);
  --line: rgba(244, 234, 210, 0.18);
  --accent: var(--aot-amber);
  --accent-text: var(--aot-stout);
  --highlight: var(--aot-teal);
}

[data-theme="light"] {
  --bg: var(--aot-cream);
  --surface: #FFFFFF;
  --text: var(--aot-ink);
  --muted: var(--aot-muted-light);
  --line: rgba(38, 45, 34, 0.18);
  --accent: var(--aot-tomato);
  --accent-text: var(--aot-cream);
  --highlight: var(--aot-chestnut);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--aot-font-body);
  font-size: var(--aot-size-body);
  line-height: 1.6;
}

[data-theme] { background: var(--bg); color: var(--text); }

h1, h2, h3 {
  font-family: var(--aot-font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--aot-space-2);
}

a { color: var(--accent); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--highlight);
  outline-offset: 3px;
}

.aot-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.5em;
  border: var(--aot-outline) solid var(--accent);
  border-radius: var(--aot-radius-pill);
  background: var(--accent);
  color: var(--accent-text);
  font: 700 1.05rem/1 var(--aot-font-body);
  text-decoration: none;
  cursor: pointer;
}
.aot-btn:hover { filter: brightness(1.08); }
.aot-btn--ghost { background: transparent; color: var(--text); border-color: var(--text); }