/* ============================================================
   Dan Barros Design System — Ovenbird
   styles.css  v2.1
   
   ARCHITECTURE (3 layers):
   ├─ LAYER 1: Primitives   --ob-green-*, --ob-teal-*, --ob-sand-*, --ob-cream-*
   ├─ LAYER 2: Semantic     --color-bg-*, --color-text-*, --color-border-*, --color-action-*
   └─ LAYER 3: Component    --btn-*, --input-*, --card-*, --badge-*
   ============================================================ */

/* ── FONTS ──────────────────────────────────────────────── */

/* Manrope — fonte variável única (cobre os pesos 200–800). */
@font-face {
  font-family: 'Manrope';
  font-weight: 200 800;          /* fonte variável — cobre os pesos 200–800 */
  font-style: normal;
  font-display: block;           /* a LP espera o Manrope carregar (texto invisível até a fonte certa, não abre com fonte diferente); preload do .woff mantém o bloqueio curtíssimo */
  src: url('fonts/Manrope.woff') format('woff'),
       url('fonts/Manrope.ttf') format('truetype');
}

/* Fallback métricamente equivalente (Arial) — elimina o "samba"/CLS no swap.
   Enquanto o Manrope carrega (cold cache, >3s de font-display: block), o
   navegador desenha Arial JÁ no tamanho do Manrope, então a troca acontece
   sem salto visível de tamanho.
   IMPORTANTE: o size-adjust foi MEDIDO por render real (canvas, texto pt-BR):
   Manrope é ~2% mais largo que Arial. O valor antigo (128.1%) vinha do
   xAvgCharWidth da tabela OS/2 (1131/2000), que em fonte VARIÁVEL é enganoso
   e fazia o 1º acesso renderizar com fontes ~28% maiores. */
@font-face {
  font-family: 'Manrope Fallback';
  src: local('Arial');
  size-adjust: 102%;
  ascent-override: 104.5%;
  descent-override: 29.4%;
  line-gap-override: 0%;
}

/* Inter removido — o sistema usa exclusivamente Manrope. */


/* ══════════════════════════════════════════════════════════
   LAYER 1 — PRIMITIVES
   Raw values. Never use directly in components.
   ══════════════════════════════════════════════════════════ */

:root {

  /* ── Green Scale (11 steps) ─────────────────────────── */
  --ob-green-50:   #eaf1f0;
  --ob-green-100:  #c5d9d6;
  --ob-green-200:  #95bdb8;
  --ob-green-300:  #6a9e96;
  --ob-green-400:  #4d7d73;
  --ob-green-500:  #386058;   /* forest-light — radial gradient edge   */
  --ob-green-600:  #2b4741;   /* forest-mid   — panel bg               */
  --ob-green-700:  #212b29;   /* forest-dark  — section bg             */
  --ob-green-800:  #1a2220;
  --ob-green-900:  #141817;   /* forest-deepest — hero, darkest bg     */
  --ob-green-950:  #0d1110;

  /* ── Teal Scale (11 steps) ──────────────────────────── */
  --ob-teal-50:    #ecf9f7;
  --ob-teal-100:   #d0f0ea;
  --ob-teal-200:   #a3ddd4;
  --ob-teal-300:   #74cabc;
  --ob-teal-400:   #52b5a0;
  --ob-teal-500:   #3ea08a;
  --ob-teal-600:   #2d8b75;   /* primary CTA — default                 */
  --ob-teal-700:   #247361;
  --ob-teal-800:   #1a5a4c;
  --ob-teal-900:   #0e4d3e;   /* CTA hover/pressed                     */
  --ob-teal-950:   #071f18;

  /* ── Sand Scale (11 steps) ──────────────────────────── */
  --ob-sand-50:    #faf9f7;
  --ob-sand-100:   #f2eee8;
  --ob-sand-200:   #e5dfd5;
  --ob-sand-300:   #d4ccbf;
  --ob-sand-400:   #c6bcac;
  --ob-sand-500:   #b9af9d;   /* brand sand — accented text, dividers  */
  --ob-sand-600:   #a09589;
  --ob-sand-700:   #857a6f;
  --ob-sand-800:   #6b6158;
  --ob-sand-900:   #4a433c;
  --ob-sand-950:   #2d2922;

  /* ── Cream Scale (warm white, 8 steps) ─────────────── */
  --ob-cream-50:   #ffffff;
  --ob-cream-100:  #fffbf6;   /* cream — main light bg                 */
  --ob-cream-200:  #faf3e8;
  --ob-cream-300:  #f6efdf;   /* cream-deep — deeper bg, icon fills    */
  --ob-cream-400:  #ede4d0;
  --ob-cream-500:  #e0d5bc;
  --ob-cream-600:  #cdc3a8;
  --ob-cream-700:  #b3a98e;

  /* ── Ink Scale (near-black to near-white on dark bg) ── */
  --ob-ink-50:     #f3f4f6;   /* body text on dark bg                  */
  --ob-ink-100:    #e5e7eb;
  --ob-ink-200:    #d1d5db;
  --ob-ink-300:    #9ca3af;
  --ob-ink-400:    #6b7280;
  --ob-ink-500:    #4a4f5c;   /* secondary text on light bg            */
  --ob-ink-600:    #374151;
  --ob-ink-700:    #2a2722;
  --ob-ink-800:    #1f1c18;
  --ob-ink-900:    #161c19;   /* primary text on light bg              */
  --ob-ink-950:    #0a0d0c;

  /* ── Feedback Primitives ────────────────────────────── */
  /* Success — warm green, harmonious with brand palette */
  --ob-success-50:   #ecfdf5;
  --ob-success-100:  #d1fae5;
  --ob-success-500:  #10b981;
  --ob-success-700:  #047857;
  --ob-success-900:  #064e3b;

  /* Warning — warm amber */
  --ob-warning-50:   #fffbeb;
  --ob-warning-100:  #fef3c7;
  --ob-warning-500:  #f59e0b;
  --ob-warning-700:  #b45309;
  --ob-warning-900:  #78350f;

  /* Error — deep red */
  --ob-error-50:     #fef2f2;
  --ob-error-100:    #fee2e2;
  --ob-error-500:    #ef4444;
  --ob-error-700:    #b91c1c;
  --ob-error-900:    #7f1d1d;

  /* Info — cool blue, neutral */
  --ob-info-50:      #eff6ff;
  --ob-info-100:     #dbeafe;
  --ob-info-500:     #3b82f6;
  --ob-info-700:     #1d4ed8;
  --ob-info-900:     #1e3a8a;

  /* Star / Rating */
  --ob-star:         #f59e0b;  /* uses warning-500 — consistent */

  /* Pure */
  --ob-white:        #ffffff;
  --ob-black:        #000000;


/* ══════════════════════════════════════════════════════════
   LAYER 2 — SEMANTIC TOKENS
   Intent-named. Map to primitives. Use these in components.
   ══════════════════════════════════════════════════════════ */

  /* ── Backgrounds ────────────────────────────────────── */
  --color-bg-canvas:       var(--ob-white);
  --color-bg-subtle:       var(--ob-cream-100);
  --color-bg-muted:        var(--ob-cream-300);
  --color-bg-section-dark: var(--ob-green-700);
  --color-bg-panel-dark:   var(--ob-green-600);
  --color-bg-hero:         var(--ob-green-900);
  --color-bg-invert:       var(--ob-green-900);

  /* ── Text ───────────────────────────────────────────── */
  --color-text-primary:    var(--ob-ink-900);   /* WCAG AA: on cream bg   */
  --color-text-secondary:  var(--ob-ink-500);   /* body copy, supporting  */
  --color-text-tertiary:   var(--ob-sand-600);  /* captions, placeholders */
  --color-text-disabled:   var(--ob-sand-400);
  --color-text-inverse:    var(--ob-white);     /* on dark bg             */
  --color-text-inverse-sub:var(--ob-ink-50);    /* body on dark bg        */
  --color-text-accent:     var(--ob-sand-500);  /* highlighted spans      */
  --color-text-link:       var(--ob-teal-600);
  --color-text-link-hover: var(--ob-teal-900);
  --color-text-on-accent:  var(--ob-white);

  /* ── Heading shortcuts (context-aware) ─────────────── */
  --color-heading-light:   var(--ob-ink-900);
  --color-heading-dark:    var(--ob-white);
  --color-heading-accent:  var(--ob-sand-500); /* muted accent spans in h2 */

  /* ── Borders ────────────────────────────────────────── */
  --color-border-subtle:   rgba(185,175,157,0.2);
  --color-border-default:  rgba(185,175,157,0.35);
  --color-border-strong:   var(--ob-sand-500);
  --color-border-inverse:  rgba(255,255,255,0.12);
  --color-border-focus:    var(--ob-teal-600);
  --color-border-error:    var(--ob-error-500);

  /* ── Actions (CTA) ──────────────────────────────────── */
  --color-action-primary:          var(--ob-teal-600);
  --color-action-primary-hover:    var(--ob-teal-900);
  --color-action-primary-active:   var(--ob-teal-950);
  --color-action-primary-subtle:   var(--ob-teal-50);
  --color-action-primary-text:     var(--ob-white);
  --color-action-ghost-border:     var(--ob-teal-600);
  --color-action-ghost-text:       var(--ob-teal-600);
  --color-action-ghost-hover-bg:   var(--ob-teal-50);
  --color-action-disabled-bg:      var(--ob-sand-200);
  --color-action-disabled-text:    var(--ob-sand-500);

  /* ── Feedback ───────────────────────────────────────── */
  --color-success-bg:      var(--ob-success-50);
  --color-success-border:  var(--ob-success-500);
  --color-success-text:    var(--ob-success-700);
  --color-success-icon:    var(--ob-success-500);

  --color-warning-bg:      var(--ob-warning-50);
  --color-warning-border:  var(--ob-warning-500);
  --color-warning-text:    var(--ob-warning-700);
  --color-warning-icon:    var(--ob-warning-500);

  --color-error-bg:        var(--ob-error-50);
  --color-error-border:    var(--ob-error-500);
  --color-error-text:      var(--ob-error-700);
  --color-error-icon:      var(--ob-error-500);

  --color-info-bg:         var(--ob-info-50);
  --color-info-border:     var(--ob-info-500);
  --color-info-text:       var(--ob-info-700);
  --color-info-icon:       var(--ob-info-500);

  /* ── Overlay ────────────────────────────────────────── */
  --color-overlay:         rgba(20,24,23,0.6);
  --color-scrim:           rgba(20,24,23,0.85);


/* ══════════════════════════════════════════════════════════
   FOUNDATIONS — Spacing, Type, Radius, Shadow, Motion, Z
   ══════════════════════════════════════════════════════════ */

  /* ── Spacing Scale (value-named, base 4px) ──────────── */
  --space-0:    0px;
  --space-px:   1px;
  --space-4:    4px;
  --space-8:    8px;
  --space-12:   12px;
  --space-16:   16px;
  --space-20:   20px;
  --space-24:   24px;
  --space-28:   28px;
  --space-32:   32px;
  --space-36:   36px;
  --space-40:   40px;
  --space-48:   48px;
  --space-56:   56px;
  --space-64:   64px;
  --space-80:   80px;
  --space-84:   84px;   /* brand-specific: section padding-y */
  --space-96:   96px;
  --space-112:  112px;
  --space-128:  128px;

  /* ── Border Width ───────────────────────────────────── */
  --border-1:   1px;
  --border-2:   2px;
  --border-4:   4px;

  /* ── Border Radius ──────────────────────────────────── */
  --radius-none:  0px;
  --radius-sm:    4px;
  --radius-md:    6px;    /* buttons */
  --radius-lg:    8px;
  --radius-xl:    12px;
  --radius-2xl:   16px;
  --radius-full:  9999px; /* pills, avatars, badges */

  /* ── Shadows / Elevation ────────────────────────────── */
  --shadow-0:    none;
  --shadow-1:    0 1px 2px rgba(20,24,23,0.06);
  --shadow-2:    0 2px 8px rgba(20,24,23,0.08), 0 1px 2px rgba(20,24,23,0.04);
  --shadow-3:    0 4px 16px rgba(20,24,23,0.1), 0 2px 4px rgba(20,24,23,0.06);
  --shadow-4:    0 8px 32px rgba(20,24,23,0.14), 0 2px 8px rgba(20,24,23,0.08);
  --shadow-5:    0 20px 60px rgba(20,24,23,0.22), 0 4px 16px rgba(20,24,23,0.1);
  --shadow-focus: 0 0 0 3px rgba(45,139,117,0.35);

  /* ── Motion ─────────────────────────────────────────── */
  --duration-instant:    80ms;
  --duration-fast:       150ms;
  --duration-base:       250ms;
  --duration-slow:       400ms;
  --duration-slower:     600ms;

  --easing-standard:     cubic-bezier(0.4, 0, 0.2, 1);   /* most UI transitions  */
  --easing-decelerate:   cubic-bezier(0.0, 0.0, 0.2, 1); /* elements entering     */
  --easing-accelerate:   cubic-bezier(0.4, 0.0, 1.0, 1); /* elements leaving      */
  --easing-spring:       cubic-bezier(0.34, 1.56, 0.64, 1); /* playful, bouncy    */
  --easing-linear:       linear;

  /* ── Z-Index ────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-above:     1;
  --z-sticky:    100;
  --z-dropdown:  200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-popover:   500;
  --z-toast:     600;
  --z-tooltip:   700;

  /* ── Layout ─────────────────────────────────────────── */
  --layout-max-w:        1216px;
  --layout-section-px:   clamp(24px, 18.33vw, 352px);
  --layout-section-py:   var(--space-84);
  --layout-measure:      68ch;   /* optimal line length for body text  */
  --layout-measure-narrow: 52ch; /* for captions, labels               */
  --layout-gutter:       var(--space-24);
  --layout-cols:         12;


/* ══════════════════════════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════════════════════════ */

  /* ── Font Families ──────────────────────────────────── */
  --font-primary:    'Manrope', 'Manrope Fallback', sans-serif;
  --font-meta:       var(--font-primary);  /* metadados → Manrope */
  --font-heading:    var(--font-primary);  /* títulos & headlines → Manrope */

  /* ── Font Weights ───────────────────────────────────── */
  --fw-extralight:   200;
  --fw-light:        300;
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;
  --fw-extrabold:    800;

  /* ── Type Scale — fluid (clamp: mobile → desktop) ───── */
  /* Ratio: ~1.25 Major Third                              */
  --fs-micro:   11px;
  --fs-xs:      12px;
  --fs-sm:      14px;
  --fs-base:    16px;
  --fs-lg:      18px;
  --fs-xl:      clamp(18px, 2vw, 20px);
  --fs-2xl:     clamp(20px, 2.5vw, 24px);
  --fs-3xl:     clamp(22px, 2.8vw, 30px);   /* h3 — was 26px flat     */
  --fs-4xl:     clamp(28px, 3.5vw, 40px);   /* h2 sub-section         */
  --fs-5xl:     clamp(32px, 4vw, 48px);     /* h2 primary — was 48px  */
  --fs-6xl:     clamp(40px, 5vw, 60px);     /* h1 / display           */
  --fs-7xl:     clamp(48px, 6vw, 72px);     /* hero display           */

  /* ── Line Heights ───────────────────────────────────── */
  --lh-none:     1;
  --lh-tight:    1.15;
  --lh-snug:     1.3;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;
  --lh-loose:    1.8;

  /* ── Letter Spacing ─────────────────────────────────── */
  --ls-tighter:  -1.5px;
  --ls-tight:    -0.8px;
  --ls-normal:   0em;
  --ls-wide:     0.03em;
  --ls-wider:    0.06em;
  --ls-widest:   0.1em;   /* all-caps labels */


/* ══════════════════════════════════════════════════════════
   LAYER 3 — COMPONENT TOKENS
   Each component has its own contract.
   ══════════════════════════════════════════════════════════ */

  /* ── Button ─────────────────────────────────────────── */
  --btn-font:            var(--font-primary);
  --btn-fw:              var(--fw-bold);
  --btn-fs:              var(--fs-base);
  --btn-radius:          var(--radius-md);
  --btn-padding-y:       17px;
  --btn-padding-x:       var(--space-40);
  --btn-padding-y-sm:    10px;
  --btn-padding-x-sm:    var(--space-20);
  --btn-transition:      background var(--duration-fast) var(--easing-standard),
                         box-shadow var(--duration-fast) var(--easing-standard),
                         opacity var(--duration-fast) var(--easing-standard);

  /* Primary */
  --btn-primary-bg:      var(--color-action-primary);
  --btn-primary-bg-hover:var(--color-action-primary-hover);
  --btn-primary-bg-active:var(--color-action-primary-active);
  --btn-primary-text:    var(--color-action-primary-text);

  /* Ghost (outline) */
  --btn-ghost-bg:        transparent;
  --btn-ghost-bg-hover:  var(--color-action-ghost-hover-bg);
  --btn-ghost-border:    var(--color-action-ghost-border);
  --btn-ghost-text:      var(--color-action-ghost-text);

  /* Ghost on dark */
  --btn-ghost-dark-border: rgba(255,255,255,0.35);
  --btn-ghost-dark-text:   var(--ob-white);
  --btn-ghost-dark-hover-bg: rgba(255,255,255,0.08);

  /* Disabled */
  --btn-disabled-bg:     var(--color-action-disabled-bg);
  --btn-disabled-text:   var(--color-action-disabled-text);
  --btn-disabled-cursor: not-allowed;

  /* ── Input / Form ────────────────────────────────────── */
  --input-font:          var(--font-primary);
  --input-fw:            var(--fw-regular);
  --input-fs:            var(--fs-base);
  --input-radius:        var(--radius-md);
  --input-padding-y:     14px;
  --input-padding-x:     var(--space-16);
  --input-border-width:  var(--border-1);

  /* Light bg inputs */
  --input-bg:            var(--ob-white);
  --input-border:        var(--color-border-default);
  --input-border-hover:  var(--color-border-strong);
  --input-border-focus:  var(--color-border-focus);
  --input-border-error:  var(--color-border-error);
  --input-text:          var(--color-text-primary);
  --input-placeholder:   var(--color-text-tertiary);
  --input-label-text:    var(--color-text-primary);
  --input-label-fw:      var(--fw-semibold);
  --input-label-fs:      var(--fs-sm);
  --input-helper-text:   var(--color-text-secondary);
  --input-error-text:    var(--color-error-text);

  /* Dark bg inputs (contact form on dark section) */
  --input-dark-bg:       rgba(255,255,255,0.07);
  --input-dark-border:   rgba(185,175,157,0.25);
  --input-dark-border-hover: rgba(185,175,157,0.5);
  --input-dark-border-focus: var(--ob-teal-600);
  --input-dark-text:     var(--ob-white);
  --input-dark-placeholder: rgba(255,255,255,0.35);

  /* ── Card ────────────────────────────────────────────── */
  --card-radius:         var(--radius-none);
  --card-padding:        var(--space-32);
  --card-shadow:         var(--shadow-2);
  --card-bg-dark:        var(--ob-green-600);
  --card-bg-light:       var(--ob-white);

  /* ── Badge / Tag ─────────────────────────────────────── */
  --badge-radius:        var(--radius-full);
  --badge-fs:            var(--fs-xs);
  --badge-fw:            var(--fw-semibold);
  --badge-padding-y:     4px;
  --badge-padding-x:     var(--space-8);

  /* ── Avatar ──────────────────────────────────────────── */
  --avatar-radius:       var(--radius-full);
  --avatar-size-sm:      32px;
  --avatar-size-md:      48px;
  --avatar-size-lg:      64px;
  --avatar-size-xl:      96px;
  --avatar-bg:           var(--ob-green-600);
  --avatar-text:         var(--ob-white);
  --avatar-border:       var(--ob-cream-300);

  /* ── Divider ─────────────────────────────────────────── */
  --divider-color:       var(--color-border-subtle);
  --divider-color-dark:  rgba(255,255,255,0.08);

  /* ── Nav ─────────────────────────────────────────────── */
  --nav-height:          68px;
  --nav-bg:              rgba(20,24,23,0.92);
  --nav-backdrop:        blur(16px);
  --nav-z:               var(--z-sticky);
}


/* ══════════════════════════════════════════════════════════
   BASE STYLES
   ══════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-primary);
  background: var(--color-bg-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Heading Scale ──────────────────────────────────────── */
h1, .ob-h1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-heading-light);
  text-wrap: pretty;
}

h2, .ob-h2 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-heading-light);
  text-wrap: pretty;
}

h3, .ob-h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--color-heading-light);
}

h4, .ob-h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--color-heading-light);
}

h5, .ob-h5 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--color-heading-light);
}

/* ── Body Text ──────────────────────────────────────────── */
p, .ob-body {
  font-family: var(--font-primary);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  max-width: var(--layout-measure);
}

.ob-body-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.ob-caption {
  font-size: var(--fs-xs);
  color: var(--color-text-tertiary);
  line-height: var(--lh-normal);
  max-width: var(--layout-measure-narrow);
}

.ob-micro {
  font-family: var(--font-meta);
  font-weight: var(--fw-light);
  font-size: var(--fs-micro);
  color: var(--color-text-tertiary);
  line-height: 1;
}

/* ── Labels & UI Text ───────────────────────────────────── */
.ob-label {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  line-height: 1.2;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-accent);
}

.ob-section-label {
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--ob-sand-500);
  margin-bottom: var(--space-16);
}

/* ── Accent text spans (within headings) ────────────────── */
.ob-text-accent { color: var(--color-text-accent); }
.ob-text-teal   { color: var(--ob-teal-600); }

/* ── On-dark overrides ──────────────────────────────────── */
.ob-on-dark h1, .ob-on-dark h2, .ob-on-dark h3, .ob-on-dark h4, .ob-on-dark h5,
.ob-on-dark .ob-h1, .ob-on-dark .ob-h2, .ob-on-dark .ob-h3 {
  color: var(--color-heading-dark);
}
.ob-on-dark p, .ob-on-dark .ob-body {
  color: var(--color-text-inverse-sub);
}
.ob-on-dark .ob-section-label { color: var(--ob-sand-500); }

/* ── Meta (Manrope, peso leve) ──────────────────────────── */
.ob-meta {
  font-family: var(--font-meta);
  font-weight: var(--fw-light);
  font-size: var(--fs-xs);
  line-height: 1;
  letter-spacing: var(--ls-normal);
}


/* ══════════════════════════════════════════════════════════
   COMPONENT CLASSES
   ══════════════════════════════════════════════════════════ */

/* ── Buttons ────────────────────────────────────────────── */
.ob-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-family: var(--btn-font);
  font-weight: var(--btn-fw);
  font-size: var(--btn-fs);
  line-height: 1;
  border-radius: var(--btn-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: var(--border-2) solid transparent;
  cursor: pointer;
  transition: var(--btn-transition);
  text-decoration: none;
  white-space: nowrap;
}
.ob-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Primary */
.ob-btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: transparent;
}
.ob-btn-primary:hover  { background: var(--btn-primary-bg-hover); }
.ob-btn-primary:active { background: var(--btn-primary-bg-active); }

/* Ghost (light context) */
.ob-btn-ghost {
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-text);
  border-color: var(--btn-ghost-border);
}
.ob-btn-ghost:hover { background: var(--btn-ghost-bg-hover); }

/* Ghost (dark context) */
.ob-btn-ghost-dark {
  background: transparent;
  color: var(--btn-ghost-dark-text);
  border-color: var(--btn-ghost-dark-border);
}
.ob-btn-ghost-dark:hover { background: var(--btn-ghost-dark-hover-bg); }

/* Text/plain */
.ob-btn-text {
  background: transparent;
  color: var(--color-text-link);
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
}
.ob-btn-text:hover { color: var(--color-text-link-hover); text-decoration: underline; }

/* Disabled */
.ob-btn:disabled, .ob-btn[aria-disabled="true"] {
  background: var(--btn-disabled-bg);
  color: var(--btn-disabled-text);
  border-color: transparent;
  cursor: var(--btn-disabled-cursor);
  pointer-events: none;
}

/* Small modifier */
.ob-btn-sm {
  padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
  font-size: var(--fs-sm);
}

/* ── Inputs ──────────────────────────────────────────────── */
.ob-input-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.ob-label-text {
  font-family: var(--input-font);
  font-weight: var(--input-label-fw);
  font-size: var(--input-label-fs);
  color: var(--input-label-text);
  line-height: 1;
}
.ob-input {
  font-family: var(--input-font);
  font-weight: var(--input-fw);
  font-size: var(--input-fs);
  color: var(--input-text);
  background: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border);
  border-radius: var(--input-radius);
  padding: var(--input-padding-y) var(--input-padding-x);
  outline: none;
  width: 100%;
  transition: border-color var(--duration-fast) var(--easing-standard),
              box-shadow var(--duration-fast) var(--easing-standard);
}
.ob-input::placeholder { color: var(--input-placeholder); }
.ob-input:hover        { border-color: var(--input-border-hover); }
.ob-input:focus        { border-color: var(--input-border-focus); box-shadow: var(--shadow-focus); }
.ob-input.error        { border-color: var(--input-border-error); }
.ob-input:disabled     { opacity: 0.5; cursor: not-allowed; background: var(--ob-sand-100); }

.ob-input-dark {
  background: var(--input-dark-bg);
  border-color: var(--input-dark-border);
  color: var(--input-dark-text);
}
.ob-input-dark::placeholder { color: var(--input-dark-placeholder); }
.ob-input-dark:hover  { border-color: var(--input-dark-border-hover); }
.ob-input-dark:focus  { border-color: var(--input-dark-border-focus); box-shadow: var(--shadow-focus); }

/* Underline variant — sem caixa, apenas border-bottom.
   Para formulários sobre fundo escuro / layouts editoriais.
   100% orientada aos tokens de input existentes (--input-*, --input-dark-*). */
.ob-input--underline {
  font-family: var(--input-font);
  font-weight: var(--input-fw);
  font-size: var(--input-fs);
  color: var(--input-dark-text);
  background: transparent;
  border: none;
  border-bottom: var(--input-border-width) solid var(--input-dark-border);
  border-radius: 0;
  padding: var(--input-padding-y) 0;
  outline: none;
  width: 100%;
  transition: border-color var(--duration-fast) var(--easing-standard);
}
.ob-input--underline::placeholder { color: var(--input-dark-placeholder); }
.ob-input--underline:hover { border-bottom-color: var(--input-dark-border-hover); }
.ob-input--underline:focus { border-bottom-color: var(--input-dark-border-focus); }

/* Select sublinhado: placeholder até estar :valid, depois texto cheio */
select.ob-input--underline {
  appearance: none;
  -webkit-appearance: none;
  color: var(--input-dark-placeholder);
}
select.ob-input--underline:valid { color: var(--input-dark-text); }
select.ob-input--underline option { background: var(--color-bg-panel-dark); color: var(--input-dark-text); }

.ob-helper { font-size: var(--fs-xs); color: var(--input-helper-text); }
.ob-error-msg { font-size: var(--fs-xs); color: var(--input-error-text); }

/* ── Badge / Tag ─────────────────────────────────────────── */
.ob-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-primary);
  font-weight: var(--badge-fw);
  font-size: var(--badge-fs);
  line-height: 1;
  border-radius: var(--badge-radius);
  padding: var(--badge-padding-y) var(--badge-padding-x);
  white-space: nowrap;
}
.ob-badge-teal    { background: var(--ob-teal-50);    color: var(--ob-teal-900);    }
.ob-badge-sand    { background: var(--ob-sand-100);   color: var(--ob-sand-900);    }
.ob-badge-success { background: var(--color-success-bg); color: var(--color-success-text); }
.ob-badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.ob-badge-error   { background: var(--color-error-bg);   color: var(--color-error-text);   }
.ob-badge-dark    { background: var(--ob-green-600);  color: var(--ob-cream-100);   }

/* ── Divider ─────────────────────────────────────────────── */
.ob-divider {
  border: none;
  border-top: var(--border-1) solid var(--divider-color);
  margin: 0;
}
.ob-divider-dark {
  border-top-color: var(--divider-color-dark);
}

/* ── Avatar ──────────────────────────────────────────────── */
.ob-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--avatar-radius);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--avatar-bg);
  color: var(--avatar-text);
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  border: var(--border-2) solid var(--avatar-border);
}
.ob-avatar-sm { width: var(--avatar-size-sm); height: var(--avatar-size-sm); font-size: var(--fs-xs); }
.ob-avatar-md { width: var(--avatar-size-md); height: var(--avatar-size-md); font-size: var(--fs-base); }
.ob-avatar-lg { width: var(--avatar-size-lg); height: var(--avatar-size-lg); font-size: var(--fs-lg); }
.ob-avatar-xl { width: var(--avatar-size-xl); height: var(--avatar-size-xl); font-size: var(--fs-2xl); }
.ob-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Feedback Alerts ─────────────────────────────────────── */
.ob-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-16);
  border-radius: var(--radius-lg);
  border: var(--border-1) solid;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
.ob-alert-success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-success-text); }
.ob-alert-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.ob-alert-error   { background: var(--color-error-bg);   border-color: var(--color-error-border);   color: var(--color-error-text);   }
.ob-alert-info    { background: var(--color-info-bg);    border-color: var(--color-info-border);    color: var(--color-info-text);    }

/* ── Accessibility ───────────────────────────────────────── */
:focus-visible {
  outline: var(--border-2) solid var(--color-border-focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Dark mode stubs (theme mapping) ────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    /* Swap bg/text for dark OS preference.
       Override per-project if needed via .light / .dark class. */
    --color-bg-canvas:       var(--ob-green-900);
    --color-bg-subtle:       var(--ob-green-700);
    --color-text-primary:    var(--ob-ink-50);
    --color-text-secondary:  var(--ob-ink-200);
    --color-heading-light:   var(--ob-white);
    --color-border-default:  rgba(255,255,255,0.1);
    --input-bg:              rgba(255,255,255,0.06);
    --input-border:          rgba(255,255,255,0.12);
    --input-text:            var(--ob-white);
    --input-placeholder:     rgba(255,255,255,0.35);
  }
}

/* ── Manual dark theme — [data-theme="dark"] or .dark class ─ */
/* Takes priority over OS preference. Toggle via JS:           */
/* document.documentElement.setAttribute('data-theme','dark') */
[data-theme="dark"],
.dark {
  --color-bg-canvas:        var(--ob-green-900);
  --color-bg-subtle:        var(--ob-green-700);
  --color-bg-muted:         var(--ob-green-600);
  --color-text-primary:     var(--ob-ink-50);
  --color-text-secondary:   var(--ob-ink-200);
  --color-text-tertiary:    var(--ob-sand-500);
  --color-text-disabled:    var(--ob-ink-400);
  --color-heading-light:    var(--ob-white);
  --color-border-subtle:    rgba(255,255,255,0.06);
  --color-border-default:   rgba(255,255,255,0.1);
  --color-border-strong:    rgba(255,255,255,0.2);
  --input-bg:               rgba(255,255,255,0.06);
  --input-border:           rgba(255,255,255,0.12);
  --input-border-hover:     rgba(255,255,255,0.25);
  --input-text:             var(--ob-white);
  --input-placeholder:      rgba(255,255,255,0.35);
  --input-label-text:       var(--ob-ink-100);
  --card-bg-light:          var(--ob-green-700);
  --divider-color:          rgba(255,255,255,0.07);
  --avatar-border:          var(--ob-green-600);
}

[data-theme="light"],
.light {
  /* Explicit light mode — overrides OS dark preference */
  --color-bg-canvas:        var(--ob-white);
  --color-bg-subtle:        var(--ob-cream-100);
  --color-text-primary:     var(--ob-ink-900);
  --color-text-secondary:   var(--ob-ink-500);
  --color-heading-light:    var(--ob-ink-900);
  --color-border-default:   rgba(185,175,157,0.35);
  --input-bg:               var(--ob-white);
  --input-border:           rgba(185,175,157,0.35);
  --input-text:             var(--ob-ink-900);
  --input-placeholder:      var(--ob-sand-600);
}


/* ══════════════════════════════════════════════════════════
   v2.1 ADDITIONS
   ══════════════════════════════════════════════════════════ */

/* ── Feedback contrast fix ──────────────────────────────── */
/* Added -600 steps for WCAG AA compliance on white bg      */
/* info-500 (#3b82f6) = 3.0:1 FAIL — use info-700 for text */
/* success-500 (#10b981) = 2.9:1 FAIL — use success-700    */
:root {
  --ob-success-600:  #059669;   /* 4.5:1 on white — AA ✓ */
  --ob-info-600:     #2563eb;   /* 4.7:1 on white — AA ✓ */
  --ob-warning-600:  #d97706;   /* 4.8:1 on white — AA ✓ */
  --ob-error-600:    #dc2626;   /* 5.1:1 on white — AA ✓ */

  /* Override semantic text colors to use AA-compliant steps */
  --color-success-text:   var(--ob-success-700);  /* 7.2:1 ✓ */
  --color-info-text:      var(--ob-info-700);      /* 5.9:1 ✓ */
  --color-warning-text:   var(--ob-warning-700);   /* 7.0:1 ✓ */
  --color-error-text:     var(--ob-error-700);     /* 6.4:1 ✓ */
  /* Icons use -600 (AA for graphical elements = 3:1) */
  --color-success-icon:   var(--ob-success-600);
  --color-info-icon:      var(--ob-info-600);
  --color-warning-icon:   var(--ob-warning-600);
  --color-error-icon:     var(--ob-error-600);

  /* ── State Layer Tokens (MD3-inspired) ────────────────── */
  /* Apply as overlay opacity on interactive surfaces       */
  --state-hover:    0.08;
  --state-pressed:  0.12;
  --state-focus:    0.12;
  --state-dragged:  0.16;
  --state-selected: 0.08;
  /* Usage: background: rgba(from var(--teal) r g b / var(--state-hover)) */
  /* Convenience hover overlays for dark surfaces: */
  --state-hover-on-dark:   rgba(255,255,255,0.08);
  --state-pressed-on-dark: rgba(255,255,255,0.12);
  --state-hover-on-light:  rgba(45,139,117,0.08);   /* teal tinted */

  /* ── On-* Tokens (MD3 pattern) ───────────────────────── */
  /* "What color goes ON TOP of this surface?" */
  --color-on-primary:      var(--ob-white);
  --color-on-secondary:    var(--ob-white);
  --color-on-surface:      var(--ob-ink-900);
  --color-on-surface-dark: var(--ob-white);
  --color-on-error:        var(--ob-white);
  --color-on-success:      var(--ob-white);
  --color-on-warning:      var(--ob-ink-900);  /* dark text on amber */
  --color-on-info:         var(--ob-white);
  --color-on-hero:         var(--ob-white);
  --color-on-accent:       var(--ob-white);
  --color-on-sand:         var(--ob-ink-900);

  /* ── Icon Sizes ───────────────────────────────────────── */
  --icon-xs:   12px;
  --icon-sm:   16px;
  --icon-md:   20px;
  --icon-lg:   24px;
  --icon-xl:   32px;
  --icon-2xl:  48px;

  /* ── Composite Border Tokens ──────────────────────────── */
  --border-default:   var(--border-1) solid var(--color-border-default);
  --border-subtle-c:  var(--border-1) solid var(--color-border-subtle);
  --border-strong-c:  var(--border-1) solid var(--color-border-strong);
  --border-focus-c:   var(--border-2) solid var(--color-border-focus);
  --border-error-c:   var(--border-1) solid var(--color-border-error);
  --border-inverse-c: var(--border-1) solid var(--color-border-inverse);
  --border-dark:      var(--border-1) solid rgba(255,255,255,0.08);

  /* ── Accessibility ────────────────────────────────────── */
  --min-touch-target:  44px;

  /* ── Paragraph Spacing ────────────────────────────────── */
  --paragraph-spacing: 1em;

  /* ── Skeleton ─────────────────────────────────────────── */
  --skeleton-bg:       var(--ob-sand-200);
  --skeleton-shine:    var(--ob-sand-100);
  --skeleton-radius:   var(--radius-sm);
  --skeleton-duration: 1.5s;

  /* ── Type Roles ───────────────────────────────────────── */
  /* Decoupled from size scale — semantic roles map to tokens */
  --type-display-size:   var(--fs-7xl);
  --type-display-lh:     var(--lh-tight);
  --type-display-ls:     var(--ls-tighter);
  --type-display-fw:     var(--fw-bold);

  --type-headline-size:  var(--fs-5xl);
  --type-headline-lh:    var(--lh-tight);
  --type-headline-ls:    var(--ls-tight);
  --type-headline-fw:    var(--fw-bold);

  --type-title-lg-size:  var(--fs-4xl);
  --type-title-lg-lh:    var(--lh-snug);
  --type-title-lg-ls:    var(--ls-tight);
  --type-title-lg-fw:    var(--fw-bold);

  --type-title-md-size:  var(--fs-3xl);
  --type-title-md-lh:    var(--lh-snug);
  --type-title-md-ls:    var(--ls-normal);
  --type-title-md-fw:    var(--fw-bold);

  --type-title-sm-size:  var(--fs-2xl);
  --type-title-sm-lh:    var(--lh-snug);
  --type-title-sm-ls:    var(--ls-normal);
  --type-title-sm-fw:    var(--fw-semibold);

  --type-body-lg-size:   var(--fs-lg);
  --type-body-lg-lh:     var(--lh-relaxed);
  --type-body-lg-fw:     var(--fw-regular);

  --type-body-md-size:   var(--fs-base);
  --type-body-md-lh:     var(--lh-normal);
  --type-body-md-fw:     var(--fw-regular);

  --type-body-sm-size:   var(--fs-sm);
  --type-body-sm-lh:     var(--lh-relaxed);
  --type-body-sm-fw:     var(--fw-regular);

  --type-label-lg-size:  var(--fs-base);
  --type-label-lg-lh:    1.2;
  --type-label-lg-fw:    var(--fw-semibold);

  --type-label-md-size:  var(--fs-sm);
  --type-label-md-lh:    1.2;
  --type-label-md-fw:    var(--fw-semibold);

  --type-label-sm-size:  var(--fs-xs);
  --type-label-sm-lh:    1;
  --type-label-sm-fw:    var(--fw-semibold);
  --type-label-sm-ls:    var(--ls-widest);
}

/* ── Type Role Classes ───────────────────────────────────── */
.ob-type-display {
  font-family: var(--font-heading);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-fw);
  line-height: var(--type-display-lh);
  letter-spacing: var(--type-display-ls);
}
.ob-type-headline {
  font-family: var(--font-heading);
  font-size: var(--type-headline-size);
  font-weight: var(--type-headline-fw);
  line-height: var(--type-headline-lh);
  letter-spacing: var(--type-headline-ls);
}
.ob-type-title-lg {
  font-family: var(--font-heading);
  font-size: var(--type-title-lg-size);
  font-weight: var(--type-title-lg-fw);
  line-height: var(--type-title-lg-lh);
  letter-spacing: var(--type-title-lg-ls);
}
.ob-type-title-md {
  font-family: var(--font-heading);
  font-size: var(--type-title-md-size);
  font-weight: var(--type-title-md-fw);
  line-height: var(--type-title-md-lh);
  letter-spacing: var(--type-title-md-ls);
}
.ob-type-title-sm {
  font-family: var(--font-heading);
  font-size: var(--type-title-sm-size);
  font-weight: var(--type-title-sm-fw);
  line-height: var(--type-title-sm-lh);
}
.ob-type-body-lg  { font-family: var(--font-primary); font-size: var(--type-body-lg-size);  font-weight: var(--type-body-lg-fw);  line-height: var(--type-body-lg-lh);  }
.ob-type-body-md  { font-family: var(--font-primary); font-size: var(--type-body-md-size);  font-weight: var(--type-body-md-fw);  line-height: var(--type-body-md-lh);  }
.ob-type-body-sm  { font-family: var(--font-primary); font-size: var(--type-body-sm-size);  font-weight: var(--type-body-sm-fw);  line-height: var(--type-body-sm-lh);  }
.ob-type-label-lg { font-family: var(--font-primary); font-size: var(--type-label-lg-size); font-weight: var(--type-label-lg-fw); line-height: var(--type-label-lg-lh); }
.ob-type-label-md { font-family: var(--font-primary); font-size: var(--type-label-md-size); font-weight: var(--type-label-md-fw); line-height: var(--type-label-md-lh); }
.ob-type-label-sm {
  font-family: var(--font-primary);
  font-size: var(--type-label-sm-size);
  font-weight: var(--type-label-sm-fw);
  line-height: var(--type-label-sm-lh);
  letter-spacing: var(--type-label-sm-ls);
  text-transform: uppercase;
}

/* Paragraph spacing for stacked prose */
.ob-prose p + p { margin-top: var(--paragraph-spacing); }


/* ── Layout Utilities ────────────────────────────────────── */

/* Container — max-width centered with brand padding */
.ob-container {
  width: 100%;
  max-width: calc(var(--layout-max-w) + var(--layout-section-px) * 2);
  margin-inline: auto;
  padding-inline: var(--layout-section-px);
}

/* Stack — vertical spacing between children */
.ob-stack { display: flex; flex-direction: column; }
.ob-stack > * + * { margin-top: var(--stack-gap, var(--space-16)); }
.ob-stack-4  { --stack-gap: var(--space-4);  }
.ob-stack-8  { --stack-gap: var(--space-8);  }
.ob-stack-12 { --stack-gap: var(--space-12); }
.ob-stack-16 { --stack-gap: var(--space-16); }
.ob-stack-24 { --stack-gap: var(--space-24); }
.ob-stack-32 { --stack-gap: var(--space-32); }
.ob-stack-48 { --stack-gap: var(--space-48); }

/* Cluster — horizontal wrap with gap */
.ob-cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--space-16));
  align-items: center;
}
.ob-cluster-4  { --cluster-gap: var(--space-4);  }
.ob-cluster-8  { --cluster-gap: var(--space-8);  }
.ob-cluster-12 { --cluster-gap: var(--space-12); }
.ob-cluster-24 { --cluster-gap: var(--space-24); }

/* Grid utilities */
.ob-grid   { display: grid; gap: var(--layout-gutter); }
.ob-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--layout-gutter); }
.ob-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--layout-gutter); }
.ob-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--layout-gutter); }
@media (max-width: 768px) {
  .ob-grid-2, .ob-grid-3, .ob-grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .ob-grid-3, .ob-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Fix btn-sm touch target — min 44px height */
.ob-btn-sm {
  padding: var(--space-12) var(--btn-padding-x-sm);
  font-size: var(--fs-sm);
  min-height: var(--min-touch-target);
}


/* ── Link ────────────────────────────────────────────────── */
.ob-link {
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--duration-fast) var(--easing-standard);
  cursor: pointer;
}
.ob-link:hover  { color: var(--color-text-link-hover); text-decoration-thickness: 2px; }
.ob-link:visited { color: var(--ob-teal-700); }
.ob-link:active  { color: var(--ob-teal-950); }
.ob-link-inverse {
  color: var(--ob-sand-300);
  text-decoration-color: rgba(185,175,157,0.5);
}
.ob-link-inverse:hover { color: var(--ob-cream-100); text-decoration-color: var(--ob-cream-100); }


/* ── Card ────────────────────────────────────────────────── */
.ob-card {
  background: var(--card-bg-light);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--shadow-2);
  transition: box-shadow var(--duration-fast) var(--easing-standard),
              transform var(--duration-fast) var(--easing-standard);
}
.ob-card-dark {
  background: var(--card-bg-dark);
  box-shadow: none;
}
.ob-card-interactive {
  cursor: pointer;
}
.ob-card-interactive:hover {
  box-shadow: var(--shadow-4);
  transform: translateY(-2px);
}
.ob-card-interactive:active {
  box-shadow: var(--shadow-2);
  transform: translateY(0);
}
.ob-card-interactive:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.ob-card-selected {
  outline: var(--border-2) solid var(--color-border-focus);
  outline-offset: 0;
}


/* ── Checkbox & Radio ────────────────────────────────────── */
.ob-check-wrap,
.ob-radio-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  cursor: pointer;
  min-height: var(--min-touch-target);
  padding-block: var(--space-8);
}
.ob-check-wrap input[type="checkbox"],
.ob-radio-wrap  input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: var(--border-2) solid var(--color-border-default);
  background: var(--input-bg);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--easing-standard),
              background   var(--duration-fast) var(--easing-standard),
              box-shadow   var(--duration-fast) var(--easing-standard);
  position: relative;
}
.ob-check-wrap input[type="checkbox"] { border-radius: var(--radius-sm); }
.ob-radio-wrap  input[type="radio"]   { border-radius: var(--radius-full); }

/* Hover */
.ob-check-wrap input[type="checkbox"]:hover,
.ob-radio-wrap  input[type="radio"]:hover {
  border-color: var(--color-border-focus);
}
/* Checked */
.ob-check-wrap input[type="checkbox"]:checked,
.ob-radio-wrap  input[type="radio"]:checked {
  background: var(--color-action-primary);
  border-color: var(--color-action-primary);
}
/* Checkmark via background image */
.ob-check-wrap input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4.5 7.5L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 9px no-repeat;
}
/* Radio dot */
.ob-radio-wrap input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 6px; height: 6px;
  background: var(--ob-white);
  border-radius: var(--radius-full);
}
/* Focus */
.ob-check-wrap input[type="checkbox"]:focus-visible,
.ob-radio-wrap  input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
/* Disabled */
.ob-check-wrap input[type="checkbox"]:disabled,
.ob-radio-wrap  input[type="radio"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ob-check-label,
.ob-radio-label {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-text-primary);
  line-height: var(--lh-normal);
  user-select: none;
}


/* ── Skeleton Loading ────────────────────────────────────── */
@keyframes ob-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.ob-skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-bg) 25%,
    var(--skeleton-shine) 50%,
    var(--skeleton-bg) 75%
  );
  background-size: 800px 100%;
  animation: ob-shimmer var(--skeleton-duration) var(--easing-linear) infinite;
  border-radius: var(--skeleton-radius);
}
.ob-skeleton-text  { height: var(--fs-lg); width: 100%; }
.ob-skeleton-text-sm { height: var(--fs-sm); width: 70%; }
.ob-skeleton-heading { height: var(--fs-5xl); width: 60%; }
.ob-skeleton-avatar-sm { width: var(--avatar-size-sm); height: var(--avatar-size-sm); border-radius: var(--radius-full); }
.ob-skeleton-avatar-md { width: var(--avatar-size-md); height: var(--avatar-size-md); border-radius: var(--radius-full); }
.ob-skeleton-img { width: 100%; aspect-ratio: 4/3; }
.ob-skeleton-btn { height: 50px; width: 180px; border-radius: var(--radius-md); }
/* Respects prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ob-skeleton { animation: none; background: var(--skeleton-bg); }
}


/* ── Skip to content (accessibility) ────────────────────── */
.ob-skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-16);
  z-index: var(--z-tooltip);
  background: var(--color-action-primary);
  color: var(--color-on-primary);
  font-family: var(--font-primary);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  padding: var(--space-8) var(--space-16);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  transition: top var(--duration-fast) var(--easing-standard);
}
.ob-skip-link:focus { top: 0; }