/* =========================================================================
   Ocean Builders — Design Tokens (v2.0, canonical)
   Single source of truth for color, type, spacing, radius, shadow, motion,
   and component primitives. All OB tools (Scheduler, Map Calculator,
   Tracker, Sales, future apps) read from these custom properties.

   This file is a strict superset of the previous ob-tokens.css — every
   token from v1 is preserved with the same name and value, plus:
     • Component tokens (button, input, card, badge, modal, nav)
     • Legacy alias layer that maps old --ob-* shortcut names from
       ob-shared.css to the new palette, so existing CSS in app.css
       picks up Ocean blue without requiring rewrites.

   Drop-in: this file already lives at /ob-tokens.css. After installing,
   the duplicate :root block at the top of ob-shared.css MUST be deleted
   (it currently shadows the legacy alias layer below). With that block
   removed, the entire app re-themes to OB blue automatically.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Poppins (body) — local files ────────────────────────────────
   Full weight + italic set kept so any --font-sans usage at any weight
   resolves to the brand face instead of a system-font fallback. The 5
   weights the design system explicitly references (400/500/600/700/800)
   are the ones the design tokens promise to ship; the rest are insurance. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 100; font-display: swap; src: url('/fonts/Poppins-Thin.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 100; font-display: swap; src: url('/fonts/Poppins-ThinItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200; font-display: swap; src: url('/fonts/Poppins-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 200; font-display: swap; src: url('/fonts/Poppins-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/Poppins-Light.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 300; font-display: swap; src: url('/fonts/Poppins-LightItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/Poppins-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/Poppins-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/Poppins-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 500; font-display: swap; src: url('/fonts/Poppins-MediumItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/Poppins-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 600; font-display: swap; src: url('/fonts/Poppins-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/Poppins-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 700; font-display: swap; src: url('/fonts/Poppins-BoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/Poppins-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 800; font-display: swap; src: url('/fonts/Poppins-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/Poppins-Black.ttf') format('truetype'); }
@font-face { font-family: 'Poppins'; font-style: italic; font-weight: 900; font-display: swap; src: url('/fonts/Poppins-BlackItalic.ttf') format('truetype'); }

:root {
  /* ═══════════════════════════════════════════════════════════════════
     PRIMITIVES — raw values, no semantic meaning yet
     ═══════════════════════════════════════════════════════════════════ */

  /* ---------- Brand ---------- */
  --ob-blue:     #2870B0;
  --ob-blue-700: #1B4D7C;
  --ob-blue-600: #225F97;
  --ob-blue-500: #3D85C4;
  --ob-blue-400: #5C9BD3;
  --ob-blue-300: #87B7E0;
  --ob-blue-200: #B6D2EC;
  --ob-blue-100: #DAE7F4;
  --ob-blue-50:  #ECF2FA;
  --ob-blue-25:  #F5F8FC;

  --ob-deep:  #0E2D44;   /* Deep navy — dark surfaces, heroes */
  --ob-surf:  #4FB6C7;   /* Surf teal — accent, highlights */
  --ob-sand:  #E9DCC4;   /* Sand — warm neutral, illustration bg */
  --ob-coral: #E27462;   /* Coral — alerts, CTAs in dark contexts */
  /* Settings panel design references --ob-navy as a synonym for ob-deep
     (used for primary headings + the Settings sheet header copy). */
  --ob-navy:  #0E2D44;

  /* ---------- Neutrals (cool, slightly blue-shifted) ---------- */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAFBFD;
  --neutral-50:  #F5F7FA;
  --neutral-100: #EEF1F5;
  --neutral-150: #E3E8EE;
  --neutral-200: #D5DCE4;
  --neutral-300: #B7C0CC;
  --neutral-400: #8E99A8;
  --neutral-500: #6B7685;
  --neutral-600: #4D5764;
  --neutral-700: #353D48;
  --neutral-800: #1F2630;
  --neutral-900: #0E141C;

  /* ═══════════════════════════════════════════════════════════════════
     SEMANTIC TOKENS — what to use in components
     ═══════════════════════════════════════════════════════════════════ */

  /* ---------- Surfaces ---------- */
  --bg-page:    var(--neutral-25);
  --bg-canvas:  var(--neutral-0);
  --bg-sunk:    var(--neutral-50);
  --bg-raised:  var(--neutral-0);
  --bg-overlay: rgba(14, 20, 28, 0.32);

  /* ---------- Foreground (text/icon) ---------- */
  --fg-1: var(--neutral-900);   /* Primary text, headings */
  --fg-2: var(--neutral-700);   /* Secondary text, body */
  --fg-3: var(--neutral-500);   /* Muted text, meta */
  --fg-4: var(--neutral-400);   /* Hint text, placeholders */
  --fg-on-brand: #FFFFFF;
  --fg-link: var(--ob-blue-600);

  /* ---------- Borders ---------- */
  --border-1:    var(--neutral-150);   /* Hairline, default */
  --border-2:    var(--neutral-200);   /* Input, button */
  --border-3:    var(--neutral-300);   /* Hover, pressed */
  --border-focus: var(--ob-blue-500);

  /* ---------- Status colors ---------- */
  --status-ready:  #6B7685;
  --status-doing:  #2870B0;
  --status-review: #B57D00;
  --status-hold:   #8B5A2B;
  --status-done:   #2E8A5A;

  /* Priority */
  --pri-high:    #D4493A;
  --pri-med:     #D89A1A;
  --pri-low:     #2E8A5A;
  --pri-high-bg: #FCEDEA;
  --pri-med-bg:  #FBF3DC;
  --pri-low-bg:  #E6F2EB;

  /* Feedback states */
  --success:     #2E8A5A;
  --success-bg:  #E6F2EB;
  --warning:     #B57D00;
  --warning-bg:  #FBF3DC;
  --danger:      #D4493A;
  --danger-bg:   #FCEDEA;
  --info:        var(--ob-blue);
  --info-bg:     var(--ob-blue-50);

  /* Calendar event tints */
  --event-appt-bg: #E4EEF8;
  --event-appt-bd: #2870B0;
  --event-appt-fg: #1B4D7C;
  --event-task-bg: #FFFFFF;
  --event-busy-bg: repeating-linear-gradient(135deg,
                     #EEF1F5 0 6px, #E3E8EE 6px 12px);

  /* ---------- Spacing (4px base) ---------- */
  --sp-0: 0;
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px;
  --sp-11: 80px; --sp-12: 96px;

  /* ---------- Radii ---------- */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 20px; --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --sh-1: 0 1px 2px rgba(14, 45, 68, 0.06), 0 1px 1px rgba(14, 45, 68, 0.04);
  --sh-2: 0 2px 6px rgba(14, 45, 68, 0.08), 0 1px 2px rgba(14, 45, 68, 0.05);
  --sh-3: 0 8px 24px rgba(14, 45, 68, 0.10), 0 2px 6px rgba(14, 45, 68, 0.06);
  --sh-4: 0 24px 48px rgba(14, 45, 68, 0.16), 0 6px 12px rgba(14, 45, 68, 0.08);
  --sh-focus: 0 0 0 3px rgba(40, 112, 176, 0.22);
  /* CRM handoff CSS refers to shadows as --shadow-*; mirror so it works. */
  --shadow-1: var(--sh-1);
  --shadow-2: var(--sh-2);
  --shadow-3: var(--sh-3);
  --shadow-focus: var(--sh-focus);
  --sh-focus-danger: 0 0 0 3px rgba(212, 73, 58, 0.22);
  --sh-inset-line: inset 0 -1px 0 var(--border-1);

  /* ---------- Type ---------- */
  --font-display: 'Manrope', 'Poppins', system-ui, -apple-system, sans-serif;
  --font-sans:    'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* Settings panel & calendar polish reference the --ob-font-* names. */
  --ob-font-display: var(--font-display);
  --ob-font-sans:    var(--font-sans);
  --ob-font-mono:    var(--font-mono);

  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px;
  --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px;
  --fs-40: 40px; --fs-48: 48px; --fs-56: 56px;

  --lh-tight: 1.15; --lh-snug: 1.3; --lh-base: 1.5; --lh-loose: 1.65;
  --tracking-tight: -0.02em; --tracking-snug: -0.01em;
  --tracking-wide:  0.04em;  --tracking-caps: 0.12em;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 480ms;

  /* ═══════════════════════════════════════════════════════════════════
     COMPONENT TOKENS — pre-baked recipes for common UI elements
     Use these in component CSS so a button is consistent everywhere.
     ═══════════════════════════════════════════════════════════════════ */

  /* ---------- Button: primary (filled OB blue) ---------- */
  --btn-primary-bg:        var(--ob-blue);
  --btn-primary-bg-hover:  var(--ob-blue-600);
  --btn-primary-bg-active: var(--ob-blue-700);
  --btn-primary-fg:        var(--fg-on-brand);
  --btn-primary-bd:        var(--ob-blue);
  --btn-primary-bd-hover:  var(--ob-blue-600);

  /* ---------- Button: secondary (outline) ---------- */
  --btn-secondary-bg:        var(--neutral-0);
  --btn-secondary-bg-hover:  var(--neutral-50);
  --btn-secondary-bg-active: var(--neutral-100);
  --btn-secondary-fg:        var(--fg-2);
  --btn-secondary-fg-hover:  var(--fg-1);
  --btn-secondary-bd:        var(--border-2);
  --btn-secondary-bd-hover:  var(--border-3);

  /* ---------- Button: ghost (transparent) ---------- */
  --btn-ghost-bg:        transparent;
  --btn-ghost-bg-hover:  var(--neutral-100);
  --btn-ghost-fg:        var(--fg-3);
  --btn-ghost-fg-hover:  var(--fg-1);

  /* ---------- Button: danger ---------- */
  --btn-danger-bg:        var(--neutral-0);
  --btn-danger-bg-hover:  var(--danger-bg);
  --btn-danger-fg:        #A53428;
  --btn-danger-bd:        #E8B6AC;

  /* ---------- Button: success / complete ---------- */
  --btn-success-bg:        var(--neutral-0);
  --btn-success-bg-hover:  var(--success-bg);
  --btn-success-fg:        #1F6740;
  --btn-success-bd:        #B6DBC2;

  /* ---------- Button sizing (height ladder) ---------- */
  --btn-h-sm: 28px;
  --btn-h-md: 34px;
  --btn-h-lg: 40px;
  --btn-px-sm: 10px;
  --btn-px-md: 14px;
  --btn-px-lg: 18px;
  --btn-radius: var(--r-md);

  /* ---------- Input ---------- */
  --input-bg:           var(--neutral-0);
  --input-bg-disabled:  var(--neutral-50);
  --input-fg:           var(--fg-1);
  --input-fg-placeholder: var(--fg-4);
  --input-bd:           var(--border-2);
  --input-bd-hover:     var(--border-3);
  --input-bd-focus:     var(--border-focus);
  --input-h-sm: 30px;
  --input-h-md: 38px;
  --input-h-lg: 44px;
  --input-px:    12px;
  --input-radius: var(--r-sm);
  --input-fs:    var(--fs-13);

  /* ---------- Card ---------- */
  --card-bg:        var(--neutral-0);
  --card-bg-hover:  var(--neutral-0);
  --card-bd:        var(--border-1);
  --card-bd-hover:  var(--border-2);
  --card-radius:    var(--r-md);
  --card-radius-lg: var(--r-lg);
  --card-pad-sm:    var(--sp-3);
  --card-pad-md:    var(--sp-4);
  --card-pad-lg:    var(--sp-5);
  --card-shadow:    var(--sh-1);
  --card-shadow-hover: var(--sh-2);

  /* ---------- Badge / Tag ---------- */
  --badge-h:        20px;
  --badge-px:       8px;
  --badge-radius:   var(--r-pill);
  --badge-fs:       11px;
  --badge-fw:       600;
  --badge-tracking: 0.04em;

  /* ---------- Modal / Sheet ---------- */
  --modal-bg:           var(--neutral-0);
  --modal-bd:           var(--border-1);
  --modal-radius:       var(--r-lg);
  --modal-shadow:       var(--sh-4);
  --modal-pad:          var(--sp-5);
  --modal-overlay:      var(--bg-overlay);
  --modal-overlay-blur: 2px;
  --sheet-w:            460px;

  /* ---------- Top nav ---------- */
  --nav-h:      56px;
  --nav-h-mobile: 48px;
  --nav-bg:     var(--neutral-0);
  --nav-bd:     var(--border-1);
  --nav-fg:     var(--fg-1);
  --nav-pad-x:  var(--sp-5);

  /* ---------- Sidebar / Rail ---------- */
  --rail-w:     248px;
  --rail-w-narrow: 220px;
  --rail-bg:    var(--neutral-25);
  --rail-bd:    var(--border-1);
  --rail-pad:   var(--sp-4);

  /* ---------- Focus ring (consistent across components) ---------- */
  --focus-ring: var(--sh-focus);

  /* ═══════════════════════════════════════════════════════════════════
     LEGACY ALIAS LAYER
     Maps the old --ob-* short tokens (defined in ob-shared.css for
     pre-redesign components) onto the new palette. This means:
       app.css has `background: var(--ob-accent)` → resolves to OB blue.
     ACTION REQUIRED: the duplicate :root block in public/ob-shared.css
     must stay deleted — if it ever gets reintroduced it'll shadow these
     aliases and the entire app silently flips back to the old indigo
     palette. The OB-blue rollout depends on this layer winning.
     ═══════════════════════════════════════════════════════════════════ */
  --ob-bg:           var(--bg-page);
  --ob-bg-alt:       var(--neutral-50);
  --ob-surface:      var(--neutral-0);
  --ob-surface2:     var(--neutral-50);
  --ob-border:       var(--border-1);
  --ob-accent:       var(--ob-blue);
  --ob-accent-light: var(--ob-blue-50);
  --ob-accent-dark:  var(--ob-blue-600);
  --ob-text:         var(--fg-1);
  --ob-muted:        var(--fg-3);
  --ob-danger:       var(--danger);
  --ob-success:      var(--success);
  --ob-warning:      var(--warning);
  --ob-radius:       var(--r-md);
  --ob-shadow:       var(--sh-1);
  --ob-shadow-lg:    var(--sh-3);
  --ob-nav-height:   var(--nav-h);
  --ob-font:         var(--font-sans);
  /* --ob-font-mono is already defined above in the type block. */

  /* Additional aliases used by 04_settings_panel/Settings Panel.html. */
  --ob-action:       var(--ob-blue);
  --ob-r-sm:         var(--r-sm);
  --ob-r-md:         var(--r-md);
  --ob-r-lg:         var(--r-lg);
  --ob-r-pill:       var(--r-pill);
  --ob-shadow-sm:    var(--sh-1);
  --ob-shadow-md:    var(--sh-2);
  /* ob-shadow-lg already defined above (= --sh-3). */
  --ob-sheet-w:      var(--sheet-w);
}

/* =========================================================================
   SEMANTIC TYPE STYLES — apply with class names from design system
   ========================================================================= */
.ob-display-1 { font-family: var(--font-display); font-size: var(--fs-56); font-weight: 800; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.ob-display-2 { font-family: var(--font-display); font-size: var(--fs-40); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.ob-h1 { font-family: var(--font-display); font-size: var(--fs-32); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); color: var(--fg-1); }
.ob-h2 { font-family: var(--font-display); font-size: var(--fs-24); font-weight: 700; line-height: var(--lh-snug); color: var(--fg-1); }
.ob-h3 { font-family: var(--font-display); font-size: var(--fs-20); font-weight: 600; line-height: var(--lh-snug); color: var(--fg-1); }
.ob-h4 { font-family: var(--font-sans);    font-size: var(--fs-16); font-weight: 600; line-height: var(--lh-snug); color: var(--fg-1); }

.ob-body    { font-family: var(--font-sans); font-size: var(--fs-15); font-weight: 400; line-height: var(--lh-base); color: var(--fg-2); }
.ob-body-sm { font-family: var(--font-sans); font-size: var(--fs-13); font-weight: 400; line-height: var(--lh-base); color: var(--fg-2); }
.ob-label   { font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 600; line-height: 1; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-3); }
.ob-mono    { font-family: var(--font-mono); font-size: var(--fs-13); font-weight: 400; }
.ob-eyebrow { font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ob-blue-600); }

/* =========================================================================
   COMPONENT BASE CLASSES — opt-in. Existing component CSS keeps working
   via the legacy alias layer above; new components should use these.
   ========================================================================= */

/* ── Button ──────────────────────────────────────────────────── */
.ob-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--btn-h-md);
  padding: 0 var(--btn-px-md);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.ob-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ob-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ob-btn--sm { height: var(--btn-h-sm); padding: 0 var(--btn-px-sm); font-size: var(--fs-12); }
.ob-btn--lg { height: var(--btn-h-lg); padding: 0 var(--btn-px-lg); font-size: var(--fs-14); }

.ob-btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: var(--btn-primary-bd);
}
.ob-btn--primary:hover:not(:disabled) {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bd-hover);
}
.ob-btn--primary:active:not(:disabled) {
  background: var(--btn-primary-bg-active);
}

.ob-btn--secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  border-color: var(--btn-secondary-bd);
}
.ob-btn--secondary:hover:not(:disabled) {
  background: var(--btn-secondary-bg-hover);
  color: var(--btn-secondary-fg-hover);
  border-color: var(--btn-secondary-bd-hover);
}

.ob-btn--ghost {
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-fg);
  border-color: transparent;
}
.ob-btn--ghost:hover:not(:disabled) {
  background: var(--btn-ghost-bg-hover);
  color: var(--btn-ghost-fg-hover);
}

.ob-btn--danger {
  background: var(--btn-danger-bg);
  color: var(--btn-danger-fg);
  border-color: var(--btn-danger-bd);
}
.ob-btn--danger:hover:not(:disabled) { background: var(--btn-danger-bg-hover); }
.ob-btn--danger:focus-visible { box-shadow: var(--sh-focus-danger); }

.ob-btn--success {
  background: var(--btn-success-bg);
  color: var(--btn-success-fg);
  border-color: var(--btn-success-bd);
}
.ob-btn--success:hover:not(:disabled) { background: var(--btn-success-bg-hover); }

/* ── Input ───────────────────────────────────────────────────── */
.ob-input,
.ob-textarea,
.ob-select {
  display: block;
  width: 100%;
  height: var(--input-h-md);
  padding: 0 var(--input-px);
  background: var(--input-bg);
  color: var(--input-fg);
  border: 1px solid var(--input-bd);
  border-radius: var(--input-radius);
  font-family: var(--font-sans);
  font-size: var(--input-fs);
  line-height: 1.4;
  outline: none;
  transition: border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.ob-input::placeholder,
.ob-textarea::placeholder { color: var(--input-fg-placeholder); }
.ob-input:hover,
.ob-textarea:hover,
.ob-select:hover { border-color: var(--input-bd-hover); }
.ob-input:focus,
.ob-textarea:focus,
.ob-select:focus {
  border-color: var(--input-bd-focus);
  box-shadow: var(--focus-ring);
}
.ob-input:disabled,
.ob-textarea:disabled,
.ob-select:disabled {
  background: var(--input-bg-disabled);
  color: var(--fg-4);
  cursor: not-allowed;
}
.ob-textarea {
  height: auto;
  min-height: 72px;
  padding: 10px var(--input-px);
  resize: vertical;
}

/* ── Field (label + input wrapper) ───────────────────────────── */
.ob-field { display: flex; flex-direction: column; gap: 8px; }
.ob-field > label,
.ob-field-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.2;
}
.ob-field-help { font-size: var(--fs-12); color: var(--fg-3); margin-top: 4px; }
.ob-field-error { font-size: var(--fs-12); color: var(--danger); margin-top: 4px; }

/* ── Card ────────────────────────────────────────────────────── */
.ob-card {
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--card-radius);
  padding: var(--card-pad-md);
  box-shadow: var(--card-shadow);
  transition: border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.ob-card--interactive { cursor: pointer; }
.ob-card--interactive:hover {
  border-color: var(--card-bd-hover);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-1px);
}
.ob-card--lg { padding: var(--card-pad-lg); border-radius: var(--card-radius-lg); }
.ob-card--sm { padding: var(--card-pad-sm); }

/* ── Badge ───────────────────────────────────────────────────── */
.ob-badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: var(--badge-h);
  padding: 0 var(--badge-px);
  border-radius: var(--badge-radius);
  font-family: var(--font-sans);
  font-size: var(--badge-fs);
  font-weight: var(--badge-fw);
  letter-spacing: var(--badge-tracking);
  white-space: nowrap;
  background: var(--neutral-100);
  color: var(--fg-2);
}
.ob-badge--info    { background: var(--info-bg);    color: var(--info); }
.ob-badge--success { background: var(--success-bg); color: var(--success); }
.ob-badge--warning { background: var(--warning-bg); color: var(--warning); }
.ob-badge--danger  { background: var(--danger-bg);  color: var(--danger); }

.ob-badge--pri-high { background: var(--pri-high-bg); color: var(--pri-high); }
.ob-badge--pri-med  { background: var(--pri-med-bg);  color: var(--pri-med); }
.ob-badge--pri-low  { background: var(--pri-low-bg);  color: var(--pri-low); }

/* ── Divider ─────────────────────────────────────────────────── */
.ob-divider { height: 1px; background: var(--border-1); border: 0; margin: var(--sp-4) 0; }

/* ── Focus utility ───────────────────────────────────────────── */
.ob-focusable:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}