/*
 * Appcues design system tokens — V2 Public API docs
 *
 * Values ported verbatim from src/index.css in
 * appcues/design-campaign-creation-experience, per
 * docs/BRAND_ADOPTION_GUIDE.md (14 May 2026).
 *
 * See docs/superpowers/specs/2026-08-10-v2-docs-rebrand-design.md
 *
 * This file holds tokens and @font-face only. Do not add component rules
 * here — a rebrand should be an edit to this file alone.
 */

/* ==========================================================================
   Fonts
   Only the weights the type system uses: 400, 500 (Martina), 600 (GT).
   GT Standard M ships no 700 cut — see the b/strong rule in screen.css.
   ========================================================================== */

@font-face {
  font-family: "GT Standard L";
  src: url("/v2/fonts/GT-Standard-L-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Standard L";
  src: url("/v2/fonts/GT-Standard-L-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Standard M";
  src: url("/v2/fonts/GT-Standard-M-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "GT Standard M";
  src: url("/v2/fonts/GT-Standard-M-Regular-Oblique.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "GT Standard M";
  src: url("/v2/fonts/GT-Standard-M-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Martina Plantijn";
  src: url("/v2/fonts/Martina-Plantijn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Martina Plantijn";
  src: url("/v2/fonts/Martina-Plantijn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Basel Grotesk Mono";
  src: url("/v2/fonts/Basel-Grotesk-Mono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ========================================================================
     Primitive ramps — 5 of the design system's 11
     Omitted: loam, raspberry, ember, vermillion, sprout, amp. Those drive
     chart fills and state colours; this page has no callouts, notices or
     verb badges. Adding one back is a paste from the adoption guide.
     ======================================================================== */

  /* Off-white — pure achromatic neutral. Content text (950). */
  --sb-color-off-white-50: #fbfbfb;
  --sb-color-off-white-100: #f6f6f6;
  --sb-color-off-white-200: #ededed;
  --sb-color-off-white-300: #dedede;
  --sb-color-off-white-400: #cccccc;
  --sb-color-off-white-500: #adadad;
  --sb-color-off-white-600: #858585;
  --sb-color-off-white-700: #616161;
  --sb-color-off-white-800: #404040;
  --sb-color-off-white-900: #242424;
  --sb-color-off-white-950: #0f0f0f;

  /* Mortar — warm taupe-gray. Page body, surface fills, edges. */
  --sb-color-mortar-50: #fbfbf8;
  --sb-color-mortar-100: #f6f6f3;
  --sb-color-mortar-200: #ede9e8;
  --sb-color-mortar-300: #d9d1ce;
  --sb-color-mortar-400: #ad9e99;
  --sb-color-mortar-500: #7e6d66;
  --sb-color-mortar-600: #5c5149;
  --sb-color-mortar-700: #483e38;
  --sb-color-mortar-800: #2c2221;
  --sb-color-mortar-900: #1f1714;
  --sb-color-mortar-950: #0e0807;

  /* Aubergine — primary brand family. 900 is the brand anchor, 400 is Orchid. */
  --sb-color-aubergine-50: #fcf7fd;
  --sb-color-aubergine-100: #f6ebf8; /* Petal */
  --sb-color-aubergine-200: #e9d9ff; /* Thistle */
  --sb-color-aubergine-300: #dcc4ff;
  --sb-color-aubergine-400: #cba7ff; /* Orchid — accent */
  --sb-color-aubergine-500: #a875f0;
  --sb-color-aubergine-600: #7e4dd4;
  --sb-color-aubergine-700: #5a3499;
  --sb-color-aubergine-800: #3d2266;
  --sb-color-aubergine-900: #291a3d; /* Aubergine — brand */
  --sb-color-aubergine-950: #140a1f;

  /* Submerge — cool counterpoint. Third syntax-highlight hue. */
  --sb-color-submerge-300: #6feeec; /* Tidal */
  --sb-color-submerge-600: #367e82; /* Current */

  /* Wisteria — muted dusty purple. 400 tints code literals; 500 is the
     `shade` role of the dark aubergine pairing. */
  --sb-color-wisteria-400: #c0aed7;
  --sb-color-wisteria-500: #a688c4;

  /* Amp — the energy accent. Anchor sits at 300, not 500. Used for the
     substitute-me placeholders in code samples ({{API_BASE_URL}}, API_KEY),
     which is the one thing in a code block a reader must act on. */
  --sb-color-amp-300: #f0fe52;

  /* ========================================================================
     Semantic tokens
     ======================================================================== */

  /* Fill — surface (Mortar-tinted) */
  --color-app-background: var(--sb-color-mortar-50);
  --color-surface: var(--sb-color-mortar-50);
  --color-surface-hover: var(--sb-color-mortar-100);
  --color-surface-secondary: var(--sb-color-mortar-200);
  --color-surface-secondary-hover: var(--sb-color-mortar-300);

  /* Fill — surface bright (pure achromatic). A second surface family: the
     Mortar-tinted `surface` sits on the page, `surface-bright` floats above
     it. Not interchangeable — chosen by intent. */
  --color-surface-bright: #ffffff;

  /* Fill — brand */
  --color-brand: var(--sb-color-aubergine-900);
  --color-brand-hover: var(--sb-color-aubergine-950);
  --color-brand-soft: var(--sb-color-aubergine-200);
  --color-brand-subtle: var(--sb-color-aubergine-50);
  --color-brand-subtle-hover: var(--sb-color-aubergine-100);

  /* Edge (borders) */
  --color-edge: var(--sb-color-mortar-200);
  --color-edge-hover: var(--sb-color-mortar-300);
  --color-edge-secondary: var(--sb-color-mortar-300);
  --color-edge-secondary-hover: var(--sb-color-mortar-400);

  /* Content (text). Secondary/tertiary are alpha-on-primary so the cream
     background tints the text rather than fighting it with a fixed grey. */
  --color-content-primary: var(--sb-color-off-white-950);
  --color-content-secondary: rgb(15 15 15 / 0.8);
  --color-content-tertiary: rgb(15 15 15 / 0.5);
  --color-content-inverse-primary: #ffffff;
  --color-content-inverse-secondary: rgb(255 255 255 / 0.75);
  --color-content-inverse-tertiary: rgb(255 255 255 / 0.6);
  --color-content-brand-primary: var(--sb-color-aubergine-900);
  --color-content-brand-secondary: var(--sb-color-aubergine-700); /* hyperlinks — AA on light */
  --color-content-brand-tertiary: var(--sb-color-aubergine-500);

  /* Misc */
  --color-accent: var(--sb-color-aubergine-400);
  --color-ring: var(--sb-color-aubergine-300);

  /* Brand pairing — soft / dark / aubergine. Consumed by the sidebar, which
     is the page's one deep brand surface.
     An atomic recipe: do not mix these roles with another pairing's, or with
     a non-pairing ground. Only bg and fg are used here; energy and shade are
     kept because the quartet was tuned as a unit. The code column is
     deliberately outside this recipe — see the .dark-box comment. */
  --color-pairing-soft-dark-aubergine-bg: var(--sb-color-aubergine-900);
  --color-pairing-soft-dark-aubergine-fg: var(--sb-color-aubergine-50);
  --color-pairing-soft-dark-aubergine-energy: var(--sb-color-aubergine-400);
  --color-pairing-soft-dark-aubergine-shade: var(--sb-color-wisteria-500);

  /* ========================================================================
     Typography
     Root body size is 15px, not 16px. Steps <= lg shift -1px from the
     Tailwind default; sizes >= xl are unchanged.
     ======================================================================== */

  --font-sans: "GT Standard M", system-ui, sans-serif;
  --font-heading: "GT Standard L", system-ui, sans-serif;
  --font-display: "Martina Plantijn", Georgia, serif;
  --font-mono: "Basel Grotesk Mono", Menlo, Monaco, Consolas, monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  --tracking-tighter: -0.8px;
  --tracking-tight: -0.4px;
  --tracking-snug: -0.2px;
  --tracking-normal: 0;
  --tracking-wide: 0.4px;

  --leading-snug: 1.2;
  --leading-relaxed: 1.4;

  /* ========================================================================
     Icons
     Heroicons, inlined as data URIs and applied via mask so the colour comes
     from a token. Replaces Slate's five-file icon font.
     ======================================================================== */

  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23000'%3E%3Cpath fill-rule='evenodd' d='M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z' clip-rule='evenodd'/%3E%3C/svg%3E");

  /* ========================================================================
     Border radius — four-tier hierarchy
     ======================================================================== */

  --radius: 0.75rem; /* 12px */
  --radius-micro: 8px; /* small buttons, badges, chips */
  --radius-interactive: 12px; /* default — buttons, inputs, code blocks */
  --radius-expressive: 16px; /* large buttons */
  --radius-container: 24px; /* large container surfaces */
}