/* AĞUSTOS DESIGN SYSTEM v5.0.1 · GENERATED DISTRIBUTION KIT CSS
   Sources: tokens/design-tokens.json + brand/brands.json + tokens/web.css.tmpl
   Do not hand-edit this file. Run: python3 scripts/build_design_system.py */

/* -- 1. CSS variables ---------------------------------------- */

:root {
  /* Substrate — white is the paper. Cream is a callout band only. */
  --paper:        #ffffff;
  --paper-white:  #ffffff;
  --cream:        #fdf5f5;
  --surface:      #ebebeb;

  /* Footer never follows the theme invert. It stays off-black. */
  --footer-paper: #15130f;
  --footer-ink:   #ffffff;
  --footer-cta-hover: #e8e4da;

  /* Ink */
  --ink:        #15130f;
  --ink-soft:   #404040;
  --ink-faint:  #8a8378;

  /* Rule */
  --rule:        #e8e4da;
  --rule-white:  #e8e4da;

  /* Semantic state colors for product and application surfaces */
  --state-success: #1f6b4a;
  --state-warning: #8a5a00;
  --state-danger:  #b42318;
  --state-info:    #1a4d8f;

  /* Shared interaction signal. Red is rationed: the 2px content-link rule,
     the 2px menu hover/current rule, and keyboard focus. The one fill
     exception is the dark-theme primary CTA. */
  --signal: #cf142a;

  /* Shared spacing and measures */
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  20px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 64px;
  --space-6xl: 80px;
  --measure-content: 1180px;
  --measure-gutter: 32px;
  --measure-text: 54ch;
  --measure-body: 72ch;
  --control-min: 44px;

  /* Named type sizes for adapter chrome and native platform mappings */
  --size-footnote: 12.5px;
  --size-body-compact: 15.5px;
  --size-body: 16.5px;

  /* Radii — proven by the website redesign and promoted into v3 foundations */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* Motion — short, purposeful state changes; never decorative drift */
  --dur: 150ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Identity ink — selected per page and used by lockups or decisive brand fields.
     Ağustos is red; every other house brand is neutral black/white. */
  --brand-agustos:     #cf142a;
  --brand-pataraz:     #15130f;
  --brand-pld:         #15130f;
  --brand-iesdesk:     #15130f;
  --brand-specquick:   #15130f;

  /* Default brand fallback (resolves before any .brand-* applies) */
  --brand: var(--brand-agustos);

  /* Type stacks — retained in v3
     --display: Inter Tight (logo, hero, headings, UI). Falls back through
                Inter to native UI fonts. Variable wght 100–900 with italics.
     --body:    Inter (paragraphs, inline elements). Falls back to the
                canonical system stack ending in Apple Color Emoji.
     --mono:    JetBrains Mono with native ui-monospace fallback. Variable first,
                matching --display and --body so one @font-face name serves both. */
  --display: 'Inter Tight Variable', 'Inter Tight', 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --body:    'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji";
  --mono:    'JetBrains Mono Variable', 'JetBrains Mono', 'SF Mono', Menlo, Consolas, ui-monospace, monospace;
}

/* -- 2. Per-brand application -------------------------------- */

.brand-agustos   { --brand: var(--brand-agustos); }
.brand-pataraz   { --brand: var(--brand-pataraz); }
.brand-pld       { --brand: var(--brand-pld); }
.brand-iesdesk   { --brand: var(--brand-iesdesk); }
.brand-specquick { --brand: var(--brand-specquick); }

/* Substrate override — kept for compatibility. White is already the default paper. */
.paper-white {
  --paper: var(--paper-white);
  --rule:  var(--rule-white);
}

/* Dark theme — product UI via html[data-theme="dark"]. Same six colours, flipped.
   Marketing pages stay light. Footer variables stay off-black. */
html[data-theme="dark"] {
  --paper:        #15130f;
  --paper-white:  #15130f;
  --cream:        #ebebeb;
  --surface:      #404040;
  --ink:        #ffffff;
  --ink-soft:   #8a8378;
  --ink-faint:  #8a8378;
  --rule:        #404040;
  --rule-white:  #404040;

  /* State colors are substrate-specific. The light values fall to 2.19-3.11
     contrast on dark paper; these lift every one back above 7. */
  --state-success: #7ec9a2;
  --state-warning: #d9a441;
  --state-danger:  #f08c82;
  --state-info:    #8ab6e8;
}
html[data-theme="dark"] code,
html[data-theme="dark"] .type-code {
  background: rgba(255, 255, 255, 0.07);
}

/* Dark hero: black is not available as a fill. Primary is filled red —
   the one approved deviation. Secondary is filled white. */
html[data-theme="dark"] .hero-action--primary,
html[data-theme="dark"] .agustos-button--primary {
  background: var(--signal);
  border-color: var(--signal);
  color: #ffffff;
}
html[data-theme="dark"] .hero-action--primary:hover,
html[data-theme="dark"] .agustos-button--primary:hover {
  background: var(--signal);
  border-color: var(--signal);
  color: #ffffff;
}
html[data-theme="dark"] .hero-action--secondary,
html[data-theme="dark"] .agustos-button--secondary {
  background: #ffffff;
  border-color: #ffffff;
  color: #15130f;
}
html[data-theme="dark"] .hero-action--secondary:hover,
html[data-theme="dark"] .agustos-button--secondary:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #15130f;
}

/* -- 3. Reset + global rules --------------------------------- */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  /* locl: Turkish capitalization correctness when lang="tr". Mandatory.
     ss01: Inter's two-storey "a" stylistic set — taste decision; flip off if a future audit prefers default. */
  font-feature-settings: "locl" on, "kern" on, "ss01" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  line-height: 1.65;
}

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

/* -- 4. Typography and content classes ---------------------- */

/* --- Hero (2) — NEW IN v2.0 --- */

.type-hero {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(56px, 8.5vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin: 0 0 0.5em;
}

.type-hero-md {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0 0 0.5em;
}

/* Hero deck — upright body utility, paired with either hero token.
   margin: 0 — relies on the preceding hero token's margin-bottom for spacing. */
.type-hero-deck {
  font-family: var(--body);
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0;
}

/* --- Headings (4) --- */

/* === Vertical rhythm — three tiers, no exceptions ===
   (1) BASELINE: every element has margin-bottom 1em (≈16px) → uniform prose flow.
   (2) SECTION BREAK: H2/H3/mid-article H4 add margin-top so adjacent vertical
       margins collapse to the LARGER value (CSS spec) → 40px above markers.
       Single shared value — hierarchy comes from heading size + weight.
   (3) Visual hierarchy comes from heading size and weight, not graduated spacing.
   See DESIGN.md §"Vertical rhythm" for the rationale. */

.type-h1 {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 60px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0 0 1em;
  color: var(--ink);
}

.type-h2 {
  font-family: var(--display);
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.034em;
  /* margin-top 2.5em ≈ 40px (collapses with prior body's 1em → max wins).
     margin-bottom 1em matches baseline → consistent gap below the heading. */
  margin: 2.5em 0 1em;
  color: var(--ink);
}

.type-h3 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -0.008em;
  margin: 2.5em 0 1em;
  color: var(--ink);
}

.type-h4 {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.005em;
  text-transform: none;
  margin: 2.5em 0 1em;
  color: var(--ink-faint);
}

/* --- Body & inline (8) --- */

.type-body {
  font-family: var(--body);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.65;
  /* Baseline rhythm — 1em (≈16px) below every element. */
  margin: 0 0 1em;
  color: var(--ink);
}

em, .type-em {
  font-style: italic;
  font-weight: 400;
}

strong, .type-strong {
  font-weight: 700;
}

/* Content-link rule: 2px red underline. Hover turns the ink red; the rule stays.
   Chrome, buttons, and footer links reset this. */
a, .type-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
a:hover, .type-link:hover { color: var(--signal); }
a:focus-visible, .type-link:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

code, .type-code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px;
  border-radius: 3px;
}

sub, .type-sub {
  font-size: 0.7em;
  font-weight: 500;
  vertical-align: -0.25em;
  line-height: 0;
}

sup, .type-sup {
  font-size: 0.7em;
  font-weight: 500;
  vertical-align: 0.5em;
  line-height: 0;
}

/* --ink-soft (7.3-8.9 contrast), not --ink-faint (3.4). Struck-through text is
   still content — a superseded price, a corrected claim — so it has to clear
   4.5:1. */
s, del, .type-strike {
  text-decoration: line-through;
  color: var(--ink-soft);
}

/* --- Block-level (9) --- */

.type-blockquote, blockquote {
  /* Content block — 1em baseline rhythm. */
  margin: 0 0 1em;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 2px solid var(--ink);
  font-family: var(--display);
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
}
.type-blockquote cite, blockquote cite {
  display: block;
  margin-top: 0.6em;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  font-style: normal;
  text-transform: none;
  letter-spacing: 0.005em;
  color: var(--ink-faint);
}

.type-pullquote {
  /* Section marker — 2.5em above to mark the visual break, 1em below baseline. */
  margin: 2.5em 0 1em;
  padding: 1em 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-align: left;
}
.type-pullquote::before {
  content: "\201C"; /* Left double curly quote */
  color: var(--ink);
  font-size: 1.1em;
  margin-right: 0.05em;
}

.type-list-ol, ol {
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  padding-left: 1.5em;
  /* Content block — 1em baseline rhythm. */
  margin: 0 0 1em;
}
.type-list-ol li::marker, ol li::marker { color: var(--ink); font-weight: 600; }

.type-list-ul, ul {
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  padding-left: 1.5em;
  /* Content block — 1em baseline rhythm. */
  margin: 0 0 1em;
}
.type-list-ul li::marker, ul li::marker { color: var(--ink); }

.type-dl, dl {
  font-family: var(--body);
  font-size: 16px;
  /* Content block — 1em baseline rhythm. */
  margin: 0 0 1em;
}
/* Internal dl rhythm — each term sits 1em below the previous definition.
   First-child dt has its margin-top collapsed by the parent's flow. */
.type-dl dt, dl dt { font-weight: 600; color: var(--ink); margin-top: 1em; }
.type-dl dt:first-child, dl dt:first-child { margin-top: 0; }
.type-dl dd, dl dd { margin: 0; color: var(--ink-soft); font-weight: 400; }

.type-figure, figure {
  /* Content block — 1em baseline rhythm. */
  margin: 0 0 1em;
  padding: 0;
}
/* --ink-soft (7.3-8.9 contrast), not --ink-faint (3.4). A caption describes
   the figure — content, not decoration, so it has to clear 4.5:1. */
.type-figure figcaption, figure figcaption {
  margin-top: 0.5em;
  font-family: var(--body);
  font-size: 13.5px;
  font-style: italic;
  color: var(--ink-soft);
}

.type-code-block, pre {
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.55;
  background: var(--ink);
  color: var(--rule);
  padding: 1em 1.25em;
  border-radius: 4px;
  overflow-x: auto;
  /* Content block — 1em baseline rhythm. */
  margin: 0 0 1em;
}
.type-code-block code, pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.type-table, table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--body);
  font-size: 15.5px;
  font-variant-numeric: tabular-nums;
  /* Content block — 1em baseline rhythm. */
  margin: 0 0 1em;
}
.type-table th, table th {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.005em;
  color: var(--ink-faint);
  text-align: left;
  padding: 0.5em 0.75em;
  border-bottom: 1px solid var(--rule);
}
.type-table td, table td {
  padding: 0.5em 0.75em;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.type-table th:last-child, .type-table td:last-child,
table th:last-child, table td:last-child { text-align: right; }

.type-divider, hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  /* Section marker — 2.5em above to mark the visual break, 1em below baseline. */
  margin: 2.5em 0 1em;
}

/* --- Supporting (1) --- */

/* --ink-soft (7.3-8.9 contrast), not --ink-faint (3.4). A footnote is
   content, not a quiet mark, so it has to clear 4.5:1. */
.type-footnote {
  font-family: var(--body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.type-footnote sup, .type-footnote .ref {
  color: var(--ink);
  font-weight: 600;
}

/* -- 5. Layout helpers (not tokens — utilities) -------------- */

.site-frame,
.container {
  width: 100%;
  max-width: 1244px;
  margin: 0 auto;
  padding-inline: 32px;
}

.container {
  padding-block: 4rem 6rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.hero-action,
.agustos-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.hero-action:hover,
.agustos-button:hover {
  text-decoration: none;
}

.hero-action:focus-visible,
.agustos-button:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.hero-action--primary,
.agustos-button--primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.hero-action--primary:hover,
.agustos-button--primary:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.hero-action--secondary,
.agustos-button--secondary {
  background: transparent;
  color: var(--ink);
}

.hero-action--secondary:hover,
.agustos-button--secondary:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Editorial hero links — page-opening action row.
   Typographic link pattern (not button) for page-defining hero compositions.
   Inherits bold + shared-red underline from the global `a` rule; this
   utility adds display family + larger size + the action-row layout. */
.hero-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 1rem;
  column-gap: 1.5rem;
  margin-top: 2rem;
}

.hero-link {
  font-family: var(--display);
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.4;
}

.hero-link--primary {
  color: var(--ink);
  font-weight: 600;
}

.hero-link--secondary {
  color: var(--ink-soft);
  font-weight: 500;
}

/* --ink-soft (7.3-8.9 contrast), not --ink-faint (3.4). Trust signals state
   real proof — year range, client count — so they have to clear 4.5:1. */
.hero-trust {
  margin: var(--space-xl) 0 0;
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.hero-visual {
  width: 100%;
  margin-top: var(--space-4xl);
}

/* `.agustos-button` above is the same control under its product-surface name.
   Do not fork it; extend the shared blocks. */

/* v3 composition recipes. These are deliberately structural: adapters may
   wrap them in framework components without changing the visual grammar. */
.agustos-section {
  padding-block: 64px;
  border-bottom: 1px solid var(--rule);
}

.agustos-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xl);
  margin-bottom: 12px;
}

.agustos-card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.agustos-card-grid > * {
  flex: 1 1 220px;
  min-width: 0;
}

.agustos-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
}

.agustos-card--marked {
  border-left: 2px solid var(--ink);
}

.agustos-chrome-link {
  min-height: var(--control-min);
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.agustos-chrome-link:hover,
.agustos-chrome-link[aria-current="page"] {
  color: var(--ink);
  text-decoration: none;
  border-bottom-color: var(--signal);
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  padding: 0.5rem 0.75rem;
  background: var(--ink);
  color: var(--paper);
  z-index: 999;
}
.skip-link:focus { left: 1rem; }

/* -- 6. UI primitives ---------------------------------------- */

/* Product-surface controls. Same grammar as the editorial layer above: hairline
   rules, 4/6px radii, one 2px signal accent per element, 44px targets, no fills
   that the page does not already own.

   This is NOT a component framework. If a pattern is not here, compose it from
   `.agustos-card`, `.agustos-section`, and the `.type-*` classes. Deliberately
   absent, and to stay absent: breadcrumbs, pagination, modals, tooltips,
   dropdowns, toasts, progress bars, accordions, avatars, and grid utilities.
   Breadcrumbs and pagination are chrome — they belong beside
   `.agustos-chrome-link` in the adapter layer, not here. */

/* --- Forms (11) --- */

.agustos-fieldset {
  margin: 0 0 var(--space-xl);
  padding: 0;
  border: 0;  /* kill the default 3D groove */
}

.agustos-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-bottom: var(--space-md);
}

.agustos-label {
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--ink-faint);
}

.agustos-label--required::after {
  content: " *";
  color: var(--ink);
}

.agustos-input,
.agustos-textarea,
.agustos-select {
  width: 100%;
  min-height: var(--control-min);
  padding: 0.6rem 0.75rem;
  background: var(--paper-white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-family: var(--body);
  /* 16px exactly: iOS zooms the viewport on focus below this. */
  font-size: 16px;
  line-height: 1.4;
  transition:
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.agustos-input::placeholder,
.agustos-textarea::placeholder {
  color: var(--ink-faint);
}

.agustos-input:hover,
.agustos-textarea:hover,
.agustos-select:hover {
  border-color: var(--ink-faint);
}

.agustos-input:focus-visible,
.agustos-textarea:focus-visible,
.agustos-select:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-color: var(--ink-soft);
}

.agustos-input:disabled,
.agustos-textarea:disabled,
.agustos-select:disabled {
  background: color-mix(in srgb, var(--rule) 40%, var(--paper));
  color: var(--ink-faint);
  cursor: not-allowed;
}

.agustos-textarea {
  min-height: 8em;
  line-height: 1.55;
  resize: vertical;
}

/* Native chevron kept on purpose: no SVG asset enters this file, and the
   platform affordance is what users already recognise. */
.agustos-select {
  padding-inline-end: var(--space-xl);
}

/* Invalid state. Works from the class or from `aria-invalid` alone, so
   server-rendered markup needs no extra class plumbing. */
.agustos-field--invalid .agustos-input,
.agustos-field--invalid .agustos-textarea,
.agustos-field--invalid .agustos-select,
.agustos-input[aria-invalid="true"],
.agustos-textarea[aria-invalid="true"],
.agustos-select[aria-invalid="true"] {
  border-color: var(--state-danger);
}

/* Checkbox and radio. `accent-color` gives a brand-correct control in one
   declaration — no replaced-element markup, no pseudo-element drawing. */
.agustos-check {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--control-min);
  font-family: var(--body);
  font-size: var(--size-body-compact);
  color: var(--ink);
  cursor: pointer;
}

.agustos-check input {
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
  margin: 0;
  accent-color: var(--ink);
}

/* --ink-soft (7.3-8.9 contrast), not --ink-faint (3.4). A form hint states a
   requirement — it is content, and it has to be readable. Placeholders keep
   --ink-faint because they are a prompt, not information. */
.agustos-hint {
  font-family: var(--body);
  font-size: var(--size-footnote);
  line-height: 1.5;
  color: var(--ink-soft);
}

.agustos-error {
  font-family: var(--display);
  font-size: var(--size-footnote);
  font-weight: 600;
  line-height: 1.5;
  color: var(--state-danger);
}

/* --- Buttons (1 new; the other three alias .hero-action in section 5) --- */

/* Tertiary action. The rank the system lacked, and the reason people invent
   their own bare <button>. */
.agustos-button--quiet {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.agustos-button--quiet:hover {
  border-color: transparent;
  box-shadow: none;
  color: var(--signal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Badges (6) --- */

/* The `.type-h4` and table-header typographic register at badge scale. Bordered
   and transparent, never a filled pill: no new visual idiom enters the system. */
.agustos-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 2px var(--space-xs);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.005em;
  text-transform: none;
  white-space: nowrap;
}

.agustos-badge--success { color: var(--state-success); }
.agustos-badge--warning { color: var(--state-warning); }
.agustos-badge--danger  { color: var(--state-danger); }
.agustos-badge--info    { color: var(--state-info); }
.agustos-badge--signal  { color: var(--ink); }

/* --- Notices (6) --- */

/* Same 2px left-rule grammar as `blockquote` and `.agustos-card--marked`.
   Three components, one idiom. */
.agustos-notice {
  padding: var(--space-md) var(--space-lg);
  border-left: 2px solid var(--rule);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--ink) 3%, var(--paper));
  font-family: var(--body);
  font-size: var(--size-body-compact);
  line-height: 1.6;
  color: var(--ink);
}

.agustos-notice__title {
  display: block;
  margin-bottom: var(--space-2xs);
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
}

.agustos-notice--success {
  border-left-color: var(--state-success);
  background: color-mix(in srgb, var(--state-success) 6%, var(--paper));
}

.agustos-notice--warning {
  border-left-color: var(--state-warning);
  background: color-mix(in srgb, var(--state-warning) 6%, var(--paper));
}

.agustos-notice--danger {
  border-left-color: var(--state-danger);
  background: color-mix(in srgb, var(--state-danger) 6%, var(--paper));
}

.agustos-notice--info {
  border-left-color: var(--state-info);
  background: color-mix(in srgb, var(--state-info) 6%, var(--paper));
}

/* --- Tabs (3) --- */

/* The 2px signal underline on the active item is the house pattern already used
   for current-page markers; this promotes it rather than inventing one. */
.agustos-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  border-bottom: 1px solid var(--rule);
}

.agustos-tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-min);
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--display);
  font-size: var(--size-body-compact);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.agustos-tab:hover {
  color: var(--ink);
  text-decoration: none;
}

.agustos-tab:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

.agustos-tab[aria-selected="true"],
.agustos-tab.is-active {
  border-bottom-color: var(--signal);
  color: var(--ink);
}

.agustos-tabs__panel {
  padding-block: var(--space-xl);
}

/* --- Reduced motion --- */

/* The handoff contract promises this; nothing delivered it before v3.1. */
@media (prefers-reduced-motion: reduce) {
  .hero-action,
  .agustos-button,
  .agustos-input,
  .agustos-textarea,
  .agustos-select,
  .agustos-tab,
  .agustos-chrome-link {
    transition: none;
  }
}