/* ==========================================================================
   An Illustrated Guide to AI Agents — design tokens
   --------------------------------------------------------------------------
   Every brand colour below is sampled from the book's own artwork, so that
   the site and the 300+ figures read as one object rather than two:

     dolphin  the blue-grey of the cover animal and the TinyAgent ASCII art
     agent    the purple the book prints TinyAgent() in
     module   the blue the book prints LLM(), Memory(), Tools() in
     mint     the fill of the "Agent" box in overview.png
     sand     the fill of the "User" / "Environment" boxes in overview.png

   Layer 1 defines --ag-* brand tokens. Layer 2 maps them onto the --md-*
   variables the theme actually consumes. Never reference a raw hex outside
   this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layer 1a — brand hues, scheme-independent
   -------------------------------------------------------------------------- */

:root {
  --ag-dolphin:      #4a6b8a;
  --ag-agent:        #c586c0;
  --ag-module:       #9cdcfe;
  --ag-mint:         #e8f3ec;
  --ag-sand:         #f5ede0;

  /* Type scale — 1.2 minor third, clamped for fluid headings */
  --ag-step--1: 0.833rem;
  --ag-step-0:  1rem;
  --ag-step-1:  1.2rem;
  --ag-step-2:  clamp(1.35rem, 1.1rem + 1.1vw, 1.6rem);
  --ag-step-3:  clamp(1.65rem, 1.2rem + 2.1vw, 2.2rem);
  --ag-step-4:  clamp(2.1rem, 1.3rem + 3.8vw, 3.4rem);
  --ag-step-5:  clamp(2.6rem, 1.4rem + 5.6vw, 4.6rem);

  /* Spacing scale */
  --ag-space-1: 0.25rem;
  --ag-space-2: 0.5rem;
  --ag-space-3: 0.75rem;
  --ag-space-4: 1rem;
  --ag-space-5: 1.5rem;
  --ag-space-6: 2rem;
  --ag-space-7: 3rem;
  --ag-space-8: 4.5rem;
  --ag-space-9: 7rem;

  --ag-radius:    10px;
  --ag-radius-sm: 6px;

  --ag-measure: 68ch;
}

/* --------------------------------------------------------------------------
   Layer 1b — light scheme
   -------------------------------------------------------------------------- */

[data-md-color-scheme="default"] {
  /* Shared with llm-book.com so both book sites feel like one family. */
  --ag-bg:          #f0f4f8;
  --ag-bg-sunk:     #d9e2e7;
  --ag-surface:     #ffffff;
  --ag-ink:         #141b25;
  --ag-ink-2:       #3b4a5c;
  --ag-ink-3:       #566878;
  --ag-rule:        #d4dee8;

  /* Accents pushed darker than the raw brand hue so they clear AA on paper */
  --ag-accent:      #2f5d87;
  --ag-accent-hi:   #1f4467;
  --ag-on-accent:   #ffffff;
  --ag-agent-ink:   #8c4a94;
  --ag-module-ink:  #2a6f96;

  --ag-plate:       #ffffff;
  --ag-shadow:      0 1px 2px rgb(20 27 37 / 6%), 0 6px 20px -8px rgb(20 27 37 / 14%);
  --ag-shadow-lift: 0 2px 4px rgb(20 27 37 / 8%), 0 16px 34px -12px rgb(20 27 37 / 22%);

  --ag-code-bg:     #141b25;
  --ag-code-fg:     #dbe4ee;
}

/* --------------------------------------------------------------------------
   Layer 2 — map brand tokens onto the theme's own variables
   -------------------------------------------------------------------------- */

[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #f0f4f8;
  --md-primary-fg-color--light: #ffffff;
  --md-primary-fg-color--dark:  #d9e2e7;
  --md-primary-bg-color:        #141b25;
  --md-primary-bg-color--light: #3b4a5c;

  --md-accent-fg-color:         var(--ag-accent);
  --md-accent-fg-color--transparent: rgb(47 93 135 / 10%);

  --md-default-bg-color:        var(--ag-bg);
  --md-default-fg-color:        var(--ag-ink);
  --md-default-fg-color--light: var(--ag-ink-2);
  --md-default-fg-color--lighter: var(--ag-ink-3);

  --md-typeset-color:           var(--ag-ink);
  --md-typeset-a-color:         var(--ag-accent);
  --md-footer-bg-color:         #10161f;
  --md-footer-bg-color--dark:   #0a0f16;
}

/* ==========================================================================
   Base typography
   ========================================================================== */

.md-typeset {
  font-size: 0.82rem;
  line-height: 1.72;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ag-ink);
  text-wrap: balance;
}

.md-typeset h1 { font-size: var(--ag-step-3); line-height: 1.14; margin-bottom: var(--ag-space-4); }
.md-typeset h2 { font-size: var(--ag-step-2); line-height: 1.22; margin-top: var(--ag-space-7); }
.md-typeset h3 { font-size: var(--ag-step-1); line-height: 1.3; margin-top: var(--ag-space-5); }

.md-typeset p,
.md-typeset li { max-width: var(--ag-measure); }

/* Uppercase mono labels get air; without tracking they read as shouting. */
.ag-label {
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ag-ink-3);
}

/* ==========================================================================
   Figure plates
   --------------------------------------------------------------------------
   Every figure in the book is drawn on white. Dropped straight onto a dark
   page they read as 300 glaring rectangles, so a figure marked { .plate }
   sits on a light card in both schemes — deliberate, like a printed inset.
   Usage in Markdown:  ![Caption](../images/overview.png){ .plate }
   ========================================================================== */

/* Deliberately not scoped to .md-typeset — the landing page renders in the
   theme's `hero` block, which sits outside it. */
img.plate,
.ag-plate {
  background: var(--ag-plate);
  padding: var(--ag-space-4);
  border-radius: var(--ag-radius);
  box-shadow: var(--ag-shadow);
  display: block;
  width: 100%;
  height: auto;
}

.md-typeset figure { margin-block: var(--ag-space-6); }

.md-typeset figcaption {
  font-size: var(--ag-step--1);
  color: var(--ag-ink-3);
  max-width: var(--ag-measure);
  margin-inline: auto;
  text-align: center;
}

/* ==========================================================================
   Header and navigation
   ========================================================================== */

.md-header {
  box-shadow: 0 1px 0 rgb(20 27 37 / 10%);
  backdrop-filter: saturate(1.4) blur(6px);
}

.md-header__title { font-weight: 600; }

.md-tabs { border-bottom: 1px solid var(--ag-rule); }
.md-tabs__link { font-size: 0.72rem; letter-spacing: 0.01em; opacity: 0.78; }
.md-tabs__link--active,
.md-tabs__link:hover { opacity: 1; }

/* ==========================================================================
   Code
   ========================================================================== */

.md-typeset code { font-size: 0.86em; }

.md-typeset pre > code {
  border-radius: var(--ag-radius-sm);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.ag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ag-space-2);
  padding: 0.72rem 1.35rem;
  border-radius: var(--ag-radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease,
              background-color 0.16s ease, color 0.16s ease,
              border-color 0.16s ease;
}

.ag-btn--primary {
  background: var(--ag-accent);
  color: var(--ag-on-accent);
  border-color: var(--ag-accent);
  box-shadow: var(--ag-shadow);
}

/* The previous book's site set white-on-white here and the label vanished.
   Both colours move together, and contrast is preserved throughout. */
.ag-btn--primary:hover,
.ag-btn--primary:focus-visible {
  background: var(--ag-accent-hi);
  border-color: var(--ag-accent-hi);
  color: var(--ag-on-accent);
  transform: translateY(-2px);
  box-shadow: var(--ag-shadow-lift);
}

.ag-btn--ghost {
  background: transparent;
  color: var(--ag-ink);
  border-color: var(--ag-rule);
}

.ag-btn--ghost:hover,
.ag-btn--ghost:focus-visible {
  background: var(--ag-surface);
  border-color: var(--ag-ink-3);
  color: var(--ag-ink);
  transform: translateY(-2px);
  box-shadow: var(--ag-shadow);
}

/* Visible keyboard focus everywhere, not just on buttons. */
a:focus-visible,
button:focus-visible,
.ag-btn:focus-visible,
.ag-card:focus-visible {
  outline: 3px solid var(--ag-agent-ink);
  outline-offset: 3px;
}

/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   Nothing on this site is hidden by default and revealed with JavaScript;
   if the script never runs, the page is still complete. Transitions are
   enhancements only, and they switch off on request.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}