/* Velnori shared primitives v2. Load AFTER each site's own styles.
   Theme only the primitives: no page reset, layout container or legacy token changes. */
:root {
  --sys-space-1: .25rem;
  --sys-space-2: .5rem;
  --sys-space-3: .75rem;
  --sys-space-4: 1rem;
  --sys-space-5: 1.5rem;
  --sys-space-6: 2rem;
  --sys-space-7: 3rem;
  --sys-space-8: 4rem;
  --sys-space-9: 6rem;
  --sys-target: 44px;
  --sys-focus-width: 3px;
  --sys-radius: 3px;
  --sys-border-width: 1px;
  --sys-measure: 65ch;
  --sys-duration: 160ms;
  --sys-font-body: Manrope, Arial, sans-serif;
  --sys-font-display: Editorial, Georgia, serif;
  --sys-paper: #f7f3ee;
  --sys-surface: #ffffff;
  --sys-soft: #ece5db;
  --sys-ink: #18212e;
  --sys-muted: #59616b;
  --sys-primary: #10243e;
  --sys-on-primary: #ffffff;
  --sys-accent: #785633;
  --sys-line: #d7d0c5;
  --sys-control-line: #73706b;
  --sys-focus: #10243e;
  --sys-error: #a22b25;
  --sys-error-bg: #fff2ef;
  --sys-success: #236344;
  --sys-success-bg: #ecf6ef;
}

/* Five independent palettes; decorative metallic tones are never small text. */
body[data-brand="sierra-nube"] {
  --sys-paper: #f7f6ef; --sys-surface: #fffdf8; --sys-soft: #dde4d9;
  --sys-ink: #1b3429; --sys-muted: #536258; --sys-primary: #1b3429;
  --sys-accent: #77572d; --sys-line: #d0d8cc; --sys-control-line: #6a776c;
  --sys-focus: #1b3429; --sys-radius: 3px;
  --sys-font-display: Newsreader, Editorial, Georgia, serif;
}
body[data-brand="luna-norte"] {
  --sys-paper: #f8f6f0; --sys-surface: #fffefd; --sys-soft: #e8e2d6;
  --sys-ink: #252a24; --sys-muted: #58604f; --sys-primary: #4d5943;
  --sys-accent: #6e593a; --sys-line: #d9d2c9; --sys-control-line: #79726a;
  --sys-focus: #252a24; --sys-radius: 0;
}
body[data-brand="brasa-mare"] {
  --sys-paper: #fbf4ea; --sys-surface: #ffffff; --sys-soft: #f2e7d6;
  --sys-ink: #30261f; --sys-muted: #675247; --sys-primary: #9b432d;
  --sys-accent: #59663c; --sys-line: #decbb8; --sys-control-line: #897566;
  --sys-focus: #9b432d; --sys-radius: 4px;
}
body[data-brand="varela"] {
  --sys-paper: #f4f2e9; --sys-surface: #ffffff; --sys-soft: #f0eadf;
  --sys-ink: #213a32; --sys-muted: #58615a; --sys-primary: #213a32;
  --sys-accent: #7b613b; --sys-line: #d8cec0; --sys-control-line: #78736b;
  --sys-focus: #213a32; --sys-radius: 2px;
}
body[data-brand="opsflow"] {
  --sys-paper: #f4f6f8; --sys-surface: #ffffff; --sys-soft: #eef4f6;
  --sys-ink: #17343b; --sys-muted: #53656b; --sys-primary: #246d60;
  --sys-accent: #725621; --sys-line: #dce3e6; --sys-control-line: #74828a;
  --sys-focus: #1f4547; --sys-radius: 8px;
  --sys-font-display: Manrope, Arial, sans-serif;
}

/* Shared operational guardrails. Inline prose links keep their inline geometry. */
:where(button, input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, summary, [role="button"], nav a, .btn, .button, .solid-button, .text-button, .nav-link, .round-button, .close) {
  min-block-size: var(--sys-target);
}
:where(button, [role="button"], .btn, .button, .round-button, .close) {
  min-inline-size: var(--sys-target);
  touch-action: manipulation;
}
:where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--sys-primary);
}
:where(label:has(> input[type="checkbox"]), label:has(> input[type="radio"])) {
  min-block-size: var(--sys-target);
  display: inline-flex;
  align-items: center;
  gap: var(--sys-space-2);
}
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--sys-focus-width) solid var(--sys-focus) !important;
  outline-offset: 3px !important;
  /* White separator preserves the outline on dark and photographic surfaces. */
  box-shadow: 0 0 0 3px var(--sys-surface) !important;
}
:where([id]) { scroll-margin-block-start: 6rem; }
:where([hidden]) { display: none !important; }
:where(dialog) { max-inline-size: calc(100vw - 2rem); max-block-size: calc(100dvh - 2rem); overflow: auto; }
:where(button:disabled, [aria-disabled="true"]) { cursor: not-allowed; }
:where(.sr-only, .visually-hidden) {
  position: absolute; inline-size: 1px; block-size: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Semantic breadcrumb: nav > ol > li, current item carries aria-current="page". */
.breadcrumb {
  color: var(--sys-muted);
  font-family: var(--sys-font-body);
  font-size: .8125rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.breadcrumb ol {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 .65rem;
  list-style: none; padding: 0; margin: 0;
}
.breadcrumb li { display: inline-flex; align-items: center; gap: .65rem; min-inline-size: 0; }
.breadcrumb li + li::before { content: "/"; color: var(--sys-control-line); }
.breadcrumb a { display: inline-flex; align-items: center; color: var(--sys-primary); text-underline-offset: .2em; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--sys-ink); font-weight: 700; }

/* One error per field, referenced with aria-describedby; no generated error text. */
.form-error {
  color: var(--sys-error); font-size: .875rem; font-weight: 700;
  line-height: 1.6; margin-block: var(--sys-space-2) 0; overflow-wrap: anywhere;
}
.form-error:empty { display: none; }
.form-error-summary {
  padding: var(--sys-space-4); color: var(--sys-error);
  background: var(--sys-error-bg); border: 1px solid currentColor;
  border-inline-start-width: 4px; border-radius: var(--sys-radius);
}
.form-error-summary a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
:where(input, select, textarea)[aria-invalid="true"] { border: 2px solid var(--sys-error) !important; }
.form-hint { color: var(--sys-muted); font-size: .8125rem; line-height: 1.6; margin-block: var(--sys-space-2) 0; }
.form-field { display: grid; gap: var(--sys-space-2); min-inline-size: 0; }
.form-field > label, .form-field > legend { color: var(--sys-ink); font-size: .875rem; font-weight: 700; }
.form-field :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  box-sizing: border-box; inline-size: 100%; min-inline-size: 0;
  min-block-size: 48px;
  padding: .75rem; border: 1px solid var(--sys-control-line); border-radius: var(--sys-radius);
  background: var(--sys-surface); color: var(--sys-ink); font: inherit;
  font-size: 1rem;
}
.form-field textarea { min-block-size: 8rem; resize: vertical; }
.form-field ::placeholder { color: var(--sys-muted); opacity: 1; }

/* Step progress is informational. Links/buttons inside remain independently usable. */
.step-progress {
  display: flex; flex-wrap: wrap; gap: var(--sys-space-3) var(--sys-space-5);
  padding: 0; margin-block: var(--sys-space-5); list-style: none; counter-reset: sys-step;
  color: var(--sys-muted); font-family: var(--sys-font-body); font-size: .8125rem;
}
.step-progress > li { counter-increment: sys-step; display: flex; align-items: center; gap: .625rem; min-block-size: var(--sys-target); }
.step-progress > li::before {
  content: counter(sys-step); display: grid; place-items: center; flex: 0 0 1.875rem;
  inline-size: 1.875rem; block-size: 1.875rem; border: 1px solid var(--sys-control-line);
  border-radius: 50%; color: var(--sys-muted); font-weight: 700;
}
.step-progress > li[aria-current="step"] { color: var(--sys-primary); font-weight: 700; }
.step-progress > li[aria-current="step"]::before {
  color: var(--sys-on-primary); background: var(--sys-primary); border-color: var(--sys-primary);
}
.step-progress > li[data-complete="true"]::before { color: var(--sys-primary); border-width: 2px; border-color: var(--sys-primary); }

.image-caption {
  display: block; color: var(--sys-muted); font-family: var(--sys-font-body);
  font-size: .75rem; line-height: 1.6; margin-block-start: var(--sys-space-3);
  max-inline-size: var(--sys-measure); overflow-wrap: anywhere;
}
.prose-panel {
  box-sizing: border-box; padding: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid var(--sys-line); border-radius: var(--sys-radius);
  background: var(--sys-surface); color: var(--sys-ink); line-height: 1.8;
  min-inline-size: 0; overflow-wrap: anywhere;
}
.prose-panel > :first-child { margin-block-start: 0; }
.prose-panel > :last-child { margin-block-end: 0; }
.prose-panel :where(p, ul, ol, blockquote) { max-inline-size: var(--sys-measure); margin-block: 1em; }
.prose-panel :where(h2, h3) { line-height: 1.25; margin-block: 1.4em .6em; text-wrap: balance; }
.prose-panel a { color: var(--sys-primary); text-decoration: underline; text-underline-offset: .2em; }

/* Context notice is intentionally compact: it never becomes a fixed overlay. */
.site-context {
  box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sys-space-2) var(--sys-space-5); padding: .625rem clamp(1rem, 3vw, 2rem);
  background: var(--sys-soft); color: var(--sys-ink); border-block-end: 1px solid var(--sys-line);
  font-family: var(--sys-font-body); font-size: .75rem; line-height: 1.6;
}
.site-context p { margin: 0; flex: 1 1 16rem; }
.site-context a { display: inline-flex; align-items: center; min-block-size: var(--sys-target); color: var(--sys-primary); text-decoration: underline; text-underline-offset: .2em; font-weight: 700; }
.site-context strong { font-weight: 700; }

/* Explicit, keyboard-focusable table region avoids horizontal page overflow.
   Add tabindex="0" role="region" aria-labelledby="table-title" to wrapper. */
:where(.table-region, .table-scroll, .table-wrap) {
  max-inline-size: 100%; min-inline-size: 0; overflow-x: auto;
  overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch;
}
.table-region { border: 1px solid var(--sys-line); border-radius: var(--sys-radius); background: var(--sys-surface); }
.table-region table { inline-size: 100%; min-inline-size: 36rem; border-collapse: collapse; color: var(--sys-ink); font-size: .875rem; line-height: 1.6; }
.table-region caption { text-align: start; padding: var(--sys-space-4); color: var(--sys-ink); font-weight: 700; }
.table-region :where(th, td) { padding: .875rem 1rem; text-align: start; vertical-align: top; border-block-end: 1px solid var(--sys-line); }
.table-region thead th { background: var(--sys-soft); font-weight: 700; }
.table-region tbody tr:last-child > * { border-block-end: 0; }
.table-region :where(td, th) > :where(button, a) { white-space: nowrap; }
.table-hint { color: var(--sys-muted); font-size: .75rem; line-height: 1.6; margin-block: var(--sys-space-2); }
.status-message { padding: var(--sys-space-4); border: 1px solid var(--sys-success); border-inline-start-width: 4px; border-radius: var(--sys-radius); color: var(--sys-success); background: var(--sys-success-bg); line-height: 1.6; }
.sys-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .625rem; min-block-size: 48px; min-inline-size: var(--sys-target); padding: .75rem 1.25rem; border: 1px solid var(--sys-primary); border-radius: var(--sys-radius); background: var(--sys-primary); color: var(--sys-on-primary); font: 700 .875rem/1.4 var(--sys-font-body); text-decoration: none; cursor: pointer; transition: filter var(--sys-duration) ease; }
.sys-button:hover { filter: brightness(.9); }
.sys-button--secondary { background: var(--sys-surface); color: var(--sys-primary); }

@media (max-width: 480px) {
  .step-progress { gap: var(--sys-space-2) var(--sys-space-3); }
  .site-context { gap: 0 var(--sys-space-4); }
  .prose-panel { padding: var(--sys-space-4); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: Highlight !important; box-shadow: none !important; }
  :where(.sys-button, .form-field input, .form-field select, .form-field textarea, .form-error-summary, .status-message, .table-region, .prose-panel) { border-color: CanvasText; forced-color-adjust: auto; }
  .step-progress > li[aria-current="step"]::before { color: HighlightText; background: Highlight; border-color: Highlight; forced-color-adjust: none; }
  .form-error { color: CanvasText; }
  .breadcrumb [aria-current="page"], .step-progress > li[aria-current="step"] { text-decoration: underline; text-underline-offset: .2em; }
}