/* ============================================================================
   AZRA DOCS — TOKENS & BASE
   Part 1 of 3 of the docs design system (tokens · shell · content).

   Written from scratch for the redesigned /docs/ site. The palette is the
   public AZRA palette (docs-md/azra-theme.md): deep crimson = security &
   action, pistachio = success & protection, on void-dark glass.

   Nothing here loads an icon CDN and nothing here is derived from the old
   docs stylesheet — this file is the single source of truth for the docs
   layer, and every other docs stylesheet resolves against it.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ── Surfaces ─────────────────────────────────────────────────────────── */
  --adz-void: #0b1220;          /* deepest — page canvas            */
  --adz-base: #111827;          /* base body                        */
  --adz-surface: #1e293b;       /* elevated card                    */
  --adz-surface-2: #243046;     /* hover / stronger elevated        */
  --adz-inset: rgba(0, 0, 0, .28);
  --adz-code-bg: #0d1526;

  /* ── Crimson — security, action, primary CTA ──────────────────────────── */
  --adz-crimson-300: #f47373;
  --adz-crimson-400: #ef4444;
  --adz-crimson: #dc2626;
  --adz-crimson-600: #b91c1c;
  --adz-crimson-700: #991b1b;

  /* ── Pistachio — success, protection, positive states ─────────────────── */
  --adz-pistachio-200: #c9e6b6;
  --adz-pistachio: #a8d08d;
  --adz-pistachio-400: #93c572;
  --adz-pistachio-500: #7fb069;

  /* ── Ink ──────────────────────────────────────────────────────────────── */
  /* The docs layer raises the two "muted" steps above the landing page's
     --text-muted #71798C: small meta text on the void canvas measured 4.29:1
     (ink-3) and 2.87:1 (ink-4) with the landing values, which is below AA for
     body-size text. These are the darkest values that still clear 4.5:1 on
     `--adz-void`, keeping the muted → body → heading hierarchy intact. */
  --adz-ink: #f7f9fc;
  --adz-ink-2: #aab4c5;   /* 8.7:1 body copy                       */
  --adz-ink-3: #949dae;   /* 6.6:1 meta, captions, breadcrumb      */
  --adz-ink-4: #7d8697;   /* 4.7:1 dimmest text / decorative icons */
  --adz-on-accent: #0b1220;

  /* ── Glass, hairlines, fills ──────────────────────────────────────────── */
  --adz-line: rgba(255, 255, 255, .07);
  --adz-line-2: rgba(255, 255, 255, .16);
  --adz-line-3: rgba(255, 255, 255, .26);
  --adz-fill: rgba(255, 255, 255, .045);
  --adz-fill-2: rgba(255, 255, 255, .08);
  --adz-glass: rgba(11, 18, 32, .82);
  --adz-rail-bg: rgba(17, 24, 39, .6);
  --adz-grid: rgba(255, 255, 255, .035);

  /* Ambient halo painted behind the whole docs canvas (see `body` below).
     Kept as tokens so the light theme can dial the same shapes right down —
     a dark-theme glow on paper reads as a smear, not as depth. */
  --adz-halo-1: rgba(220, 38, 38, .16);
  --adz-halo-2: rgba(127, 176, 105, .12);

  /* ── Role aliases (semantic names used by the components) ─────────────── */
  --adz-brand: var(--adz-crimson);
  --adz-brand-strong: var(--adz-crimson-600);
  --adz-brand-soft: rgba(220, 38, 38, .14);
  --adz-success: var(--adz-pistachio);
  --adz-success-soft: rgba(168, 208, 141, .14);
  --adz-danger: var(--adz-crimson-400);
  --adz-danger-soft: rgba(239, 68, 68, .14);
  --adz-info: #38bdf8;
  --adz-info-soft: rgba(56, 189, 248, .13);
  --adz-warn: #f0b429;
  --adz-warn-soft: rgba(240, 180, 41, .14);
  --adz-violet: #a78bfa;
  --adz-violet-soft: rgba(167, 139, 250, .14);
  --adz-blurple: #5865f2;

  /* Accent hairlines — borders that must stay legible as UI on either canvas
     (a pale green border is invisible on white, a strong one is loud on black).
     Components reference these instead of hardcoding rgba() per rule. */
  --adz-line-brand: rgba(220, 38, 38, .45);
  --adz-line-success: rgba(168, 208, 141, .48);
  --adz-line-danger: rgba(239, 68, 68, .45);
  --adz-line-info: rgba(56, 189, 248, .45);
  --adz-line-warn: rgba(240, 180, 41, .45);
  --adz-line-violet: rgba(167, 139, 250, .45);

  /* Overlay scrims (drawer backdrop, search palette) and the two decorative
     glows used by the hub hero and the Pro plan card. Dark scrims are almost
     opaque navy; on paper they need to be a light slate, or the overlay reads
     as a black hole. */
  --adz-scrim: rgba(3, 7, 18, .62);
  --adz-scrim-soft: rgba(3, 7, 18, .55);
  --adz-hero-1: rgba(220, 38, 38, .22);
  --adz-hero-2: rgba(127, 176, 105, .18);

  /* ── Gradients ────────────────────────────────────────────────────────── */
  --adz-grad-crimson: linear-gradient(135deg, #dc2626, #991b1b);
  --adz-grad-pistachio: linear-gradient(135deg, #a8d08d, #7fb069);
  --adz-grad-brand: linear-gradient(120deg, #dc2626 0%, #b91c1c 38%, #7fb069 100%);
  --adz-grad-text: linear-gradient(100deg, #ffffff 0%, #a8d08d 55%, #f47373 100%);

  /* ── Typography ───────────────────────────────────────────────────────── */
  --adz-font-display: "Sora", "Segoe UI", system-ui, -apple-system, sans-serif;
  --adz-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --adz-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --adz-fs-h1: clamp(1.85rem, 1.35rem + 2.1vw, 2.6rem);
  --adz-fs-h2: clamp(1.32rem, 1.12rem + .8vw, 1.62rem);
  --adz-fs-h3: clamp(1.05rem, 1rem + .3vw, 1.16rem);
  --adz-fs-h4: 1rem;
  --adz-fs-lead: clamp(1rem, .96rem + .22vw, 1.09rem);
  --adz-fs-body: .95rem;
  --adz-fs-sm: .84rem;
  --adz-fs-xs: .76rem;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --adz-top-h: 58px;
  --adz-rail-w: 292px;
  --adz-toc-w: 244px;
  --adz-content-max: 74ch;
  --adz-article-max: 880px;
  --adz-gutter: clamp(16px, 3.2vw, 40px);

  /* ── Radii ────────────────────────────────────────────────────────────── */
  --adz-r-xs: 6px;
  --adz-r-sm: 9px;
  --adz-r: 13px;
  --adz-r-lg: 18px;
  --adz-r-xl: 26px;
  --adz-r-pill: 999px;

  /* ── Elevation ────────────────────────────────────────────────────────── */
  --adz-shadow-1: 0 1px 2px rgba(0, 0, 0, .32);
  --adz-shadow-2: 0 16px 34px -20px rgba(0, 0, 0, .7);
  --adz-shadow-3: 0 34px 70px -28px rgba(0, 0, 0, .78);
  --adz-glow-brand: 0 0 0 1px rgba(220, 38, 38, .34), 0 18px 42px -22px rgba(220, 38, 38, .6);
  --adz-glow-success: 0 0 0 1px rgba(168, 208, 141, .3), 0 18px 42px -22px rgba(168, 208, 141, .45);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --adz-ease: cubic-bezier(.22, .61, .36, 1);
  --adz-dur-1: .14s;
  --adz-dur-2: .24s;
  --adz-dur-3: .42s;

  /* ── Layers ───────────────────────────────────────────────────────────── */
  --adz-z-progress: 70;
  --adz-z-top: 60;
  --adz-z-backdrop: 78;
  --adz-z-drawer: 80;
  --adz-z-palette: 100;
}

/* ── Light "paper" theme ──────────────────────────────────────────────────
   Same roles, inverted surfaces. Deliberately restrained: crimson and
   pistachio stay recognisably AZRA, the canvas goes to a cool off-white. */
[data-theme="light"] {
  color-scheme: light;
  --adz-void: #f4f6fb;
  --adz-base: #ffffff;
  --adz-surface: #ffffff;
  --adz-surface-2: #eef2f8;
  --adz-inset: rgba(15, 23, 42, .04);
  --adz-code-bg: #f5f7fb;

  --adz-ink: #0f172a;
  --adz-ink-2: #46536b;
  /* Ink 3/4 carry small meta text and anchors on white, so they are darker
     here than a "muted grey" would normally be. Measured against both #fff and
     the composited light surface (a fill over #f4f6fb): 5.5:1 and 4.6:1. */
  --adz-ink-3: #5a6577;
  --adz-ink-4: #616b7a;

  --adz-line: rgba(15, 23, 42, .1);
  --adz-line-2: rgba(15, 23, 42, .18);
  --adz-line-3: rgba(15, 23, 42, .3);
  --adz-fill: rgba(15, 23, 42, .035);
  --adz-fill-2: rgba(15, 23, 42, .07);
  --adz-glass: rgba(255, 255, 255, .86);
  --adz-rail-bg: rgba(255, 255, 255, .72);
  --adz-grid: rgba(15, 23, 42, .045);
  --adz-halo-1: rgba(220, 38, 38, .07);
  --adz-halo-2: rgba(127, 176, 105, .09);

  /* ── Accent ROLES, re-pitched for paper ────────────────────────────────
     The dark theme paints accents as light-on-dark (pistachio #A8D08D,
     info #38bdf8, warn #f0b429). The same values as text on white are
     1.8–2.5:1, so light mode overrides the roles — not the 35 rules that
     consume them — with darker members of the same hue family. Measured
     against #ffffff; every value below clears 4.5:1 for text. */
  --adz-pistachio-200: #266333;      /* 6.6:1  (was the light a-hover ink)  */
  --adz-pistachio: #2f7a3f;          /* 5.0:1  links, eyebrows, args        */
  --adz-pistachio-400: #3d8f4c;
  --adz-pistachio-500: #4b7a2f;
  --adz-crimson-300: #b42318;        /* 6.0:1  sig names, section icons     */
  --adz-crimson-400: #d92d20;        /* 4.9:1  the "red" role               */
  --adz-crimson-600: #9a3412;
  --adz-crimson-700: #7f1d1d;
  --adz-info: #0b67a3;               /* 5.1:1  the "blue" role              */
  --adz-warn: #8a6100;               /* 5.1:1  the "amber" role             */
  --adz-violet: #6b4fd6;             /* 5.6:1                               */
  --adz-blurple: #4752c4;            /* 6.4:1                               */
  --adz-on-accent: #ffffff;          /* ink for text placed on accent fills */

  --adz-brand: #b42318;              /* brand rules / bars / markers        */
  --adz-brand-strong: #9a3412;
  --adz-success: #2f7a3f;
  --adz-danger: #d92d20;

  --adz-brand-soft: rgba(220, 38, 38, .09);
  --adz-success-soft: rgba(47, 122, 63, .11);
  --adz-danger-soft: rgba(220, 38, 38, .1);
  --adz-info-soft: rgba(11, 103, 163, .1);
  --adz-warn-soft: rgba(138, 97, 0, .11);
  --adz-violet-soft: rgba(107, 79, 214, .1);

  --adz-line-brand: rgba(180, 35, 24, .4);
  --adz-line-success: rgba(47, 122, 63, .4);
  --adz-line-danger: rgba(217, 45, 32, .4);
  --adz-line-info: rgba(11, 103, 163, .4);
  --adz-line-warn: rgba(138, 97, 0, .4);
  --adz-line-violet: rgba(107, 79, 214, .4);

  --adz-scrim: rgba(15, 23, 42, .34);
  --adz-scrim-soft: rgba(15, 23, 42, .26);
  --adz-hero-1: rgba(220, 38, 38, .1);
  --adz-hero-2: rgba(127, 176, 105, .13);

  /* Filled surfaces that carry white text need a slightly deeper crimson on
     paper (white on #d92d20 = 5.0:1) while the gradients keep their shape. */
  --adz-grad-crimson: linear-gradient(135deg, #d92d20, #9a3412);
  --adz-grad-pistachio: linear-gradient(135deg, #2f7a3f, #266333);
  --adz-grad-brand: linear-gradient(120deg, #d92d20 0%, #b42318 38%, #2f7a3f 100%);
  --adz-grad-text: linear-gradient(100deg, #0f172a 0%, #2f7a3f 58%, #b42318 100%);
  --adz-shadow-1: 0 1px 2px rgba(15, 23, 42, .08);
  --adz-shadow-2: 0 14px 30px -20px rgba(15, 23, 42, .28);
  --adz-shadow-3: 0 30px 60px -30px rgba(15, 23, 42, .3);
  --adz-glow-brand: 0 0 0 1px rgba(220, 38, 38, .28), 0 16px 36px -24px rgba(220, 38, 38, .38);
  --adz-glow-success: 0 0 0 1px rgba(47, 122, 63, .24), 0 16px 36px -24px rgba(47, 122, 63, .3);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--adz-top-h) + 24px);
  -webkit-text-size-adjust: 100%;
  /* `clip` rather than `hidden`: it still contains the ambient halo and any
     overflowing table, but it does not turn the root into a scroll container
     (which is what breaks `position: sticky` descendants). */
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--adz-font-body);
  font-size: var(--adz-fs-body);
  line-height: 1.68;
  color: var(--adz-ink-2);
  background-color: var(--adz-void);
  background-image:
    radial-gradient(900px 520px at 8% -10%, var(--adz-halo-1), transparent 62%),
    radial-gradient(760px 520px at 100% 0%, var(--adz-halo-2), transparent 58%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: var(--adz-font-display);
  color: var(--adz-ink);
  line-height: 1.24;
  letter-spacing: -.012em;
  font-weight: 700;
  margin: 0;
}

p { margin: 0; }

a { color: var(--adz-pistachio); text-decoration: none; }
a:hover { color: var(--adz-pistachio-200); }

strong, b { color: var(--adz-ink); font-weight: 600; }
em { color: var(--adz-ink); font-style: italic; }
small { font-size: var(--adz-fs-xs); }

ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video { display: block; max-width: 100%; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }

hr { border: 0; border-top: 1px solid var(--adz-line); margin: 26px 0; }

code, kbd, samp, pre { font-family: var(--adz-font-mono); font-size: .875em; }

::selection { background: rgba(220, 38, 38, .34); color: var(--adz-ink); }

:focus-visible {
  outline: 2px solid var(--adz-pistachio);
  outline-offset: 2px;
  border-radius: var(--adz-r-xs);
}

/* Scrollbars — thin, glassy, both themes */
* { scrollbar-width: thin; scrollbar-color: var(--adz-line-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--adz-line-2);
  border: 3px solid transparent;
  border-radius: var(--adz-r-pill);
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--adz-line-3); }

/* ── Icon sprite ──────────────────────────────────────────────────────────
   Every icon is an inline <svg class="adz-ico"><use href="#i-…">. Ionicons
   are fill geometry, so the HOST svg paints with fill:currentColor — a
   presentation attribute on the hidden sprite root would never inherit into
   the <use> shadow content (docs-md/icons.md §4). */
.adz-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.adz-ico {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  /* Ionicons outline geometry is stroke-only; filled glyphs rely on the fill.
     Painting both from the host <svg> covers every icon in the sprite. */
  fill: currentColor;
  stroke: currentColor;
  vertical-align: -.155em;
}

/* ── Accessibility helpers ──────────────────────────────────────────────── */
.adz-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--adz-r-sm);
  background: var(--adz-crimson);
  color: #fff;
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform var(--adz-dur-2) var(--adz-ease);
}
.adz-skip:focus { transform: none; color: #fff; }

.adz-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  border: 1px solid var(--adz-line-2);
  border-bottom-width: 2px;
  border-radius: var(--adz-r-xs);
  background: var(--adz-fill);
  color: var(--adz-ink-3);
  font-family: var(--adz-font-mono);
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ── Scroll reveal (opt-in, motion-safe) ────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html.adz-js [data-adz-reveal] {
    opacity: 0;
    transform: translateY(14px);
  }
  html.adz-js [data-adz-reveal].adz-in {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--adz-dur-3) var(--adz-ease),
      transform var(--adz-dur-3) var(--adz-ease);
  }
}

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

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .adz-top, .adz-rail, .adz-toc, .adz-pager, .adz-foot, .adz-palette,
  .adz-progress, .adz-backdrop, .adz-chips, .adz-filterbar, .adz-copy {
    display: none !important;
  }
  body { background: #fff; color: #111; }
  a { color: #111; text-decoration: underline; }
  .adz-shell { display: block; }
  .adz-article { max-width: none; padding: 0; }
}