/*
 * UNKWN CHAMPIONSHIP DESIGN SYSTEM — PASS810
 * Canonical product-wide token/component foundation.
 * This layer intentionally protects the accepted PASS809 Tracker/Recovery geometry while
 * establishing one visual language for all championship redesign work that follows.
 */

html[data-unkwn-design="810"] {
  /* Core palette — graphite/black foundation, warm earned gold, restrained semantic color. */
  --u-bg-0: #050505;
  --u-bg-1: #090909;
  --u-surface-1: #0f0f10;
  --u-surface-2: #151516;
  --u-surface-3: #1c1c1e;
  --u-surface-pressed: #0b0b0c;
  --u-stroke-soft: rgba(255,255,255,.075);
  --u-stroke: rgba(255,255,255,.115);
  --u-stroke-strong: rgba(255,255,255,.18);

  --u-gold-100: #f4dfab;
  --u-gold-200: #e7c77f;
  --u-gold-300: #d6ad59;
  --u-gold-400: #bd9145;
  --u-gold-500: #8f6a34;
  --u-gold-stroke: rgba(214,173,89,.36);
  --u-gold-soft: rgba(214,173,89,.10);
  --u-gold-glow: rgba(214,173,89,.18);

  --u-text-1: rgba(255,255,255,.97);
  --u-text-2: rgba(255,255,255,.74);
  --u-text-3: rgba(255,255,255,.52);
  --u-text-4: rgba(255,255,255,.36);
  --u-positive: #72b98d;
  --u-warning: #d7a85c;
  --u-danger: #d27575;

  /* Typography roles. Display is identity. UI/body prioritizes comprehension. */
  --u-font-display: 'Barlow Condensed', system-ui, sans-serif;
  --u-font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --u-font-scripture: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --u-font-ritual: 'Marcellus', Georgia, serif;

  --u-type-hero: clamp(2.1rem, 8vw, 3.45rem);
  --u-type-title: clamp(1.65rem, 5.8vw, 2.3rem);
  --u-type-section: 1.12rem;
  --u-type-body: .9375rem;
  --u-type-small: .8125rem;
  --u-type-micro: .75rem;

  /* 4px-based rhythm with explicit breathing room for flagship surfaces. */
  --u-space-1: 4px;
  --u-space-2: 8px;
  --u-space-3: 12px;
  --u-space-4: 16px;
  --u-space-5: 20px;
  --u-space-6: 24px;
  --u-space-7: 32px;
  --u-space-8: 40px;
  --u-space-9: 48px;

  /* Tactility — softer than legacy metal cards, still unmistakably UNKWN. */
  --u-radius-xs: 10px;
  --u-radius-sm: 14px;
  --u-radius-md: 18px;
  --u-radius-lg: 22px;
  --u-radius-xl: 28px;
  --u-radius-pill: 999px;
  --u-shadow-1: 0 8px 26px rgba(0,0,0,.28);
  --u-shadow-2: 0 16px 44px rgba(0,0,0,.40);
  --u-inset-top: inset 0 1px 0 rgba(255,255,255,.045);
  --u-inset-gold: inset 0 1px 0 rgba(255,240,195,.22);

  --u-touch-min: 46px;
  --u-motion-press: 90ms;
  --u-motion-fast: 150ms;
  --u-motion-standard: 220ms;
  --u-motion-slow: 360ms;
  --u-ease-out: cubic-bezier(.22,1,.36,1);
  --u-ease-standard: cubic-bezier(.2,.8,.2,1);
  --u-safe-top: env(safe-area-inset-top, 0px);
  --u-safe-bottom: env(safe-area-inset-bottom, 0px);
}

html[data-unkwn-design="810"],
html[data-unkwn-design="810"] body {
  background: var(--u-bg-0);
  color: var(--u-text-1);
}

/* Strong focus without introducing browser-blue visual noise. */
html[data-unkwn-design="810"] :where(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--u-gold-200) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(214,173,89,.13) !important;
}

html[data-unkwn-design="810"] ::selection {
  background: rgba(214,173,89,.28);
  color: #fff;
}

/* Canonical component primitives for all new/rebuilt surfaces. */
html[data-unkwn-design="810"] .u810-display,
html[data-unkwn-design="810"] .u810-title,
html[data-unkwn-design="810"] .u810-section-title {
  font-family: var(--u-font-display);
  color: var(--u-text-1);
  text-wrap: balance;
}
html[data-unkwn-design="810"] .u810-display {
  font-size: var(--u-type-hero);
  line-height: .92;
  font-weight: 800;
  letter-spacing: -.018em;
  text-transform: uppercase;
}
html[data-unkwn-design="810"] .u810-title {
  font-size: var(--u-type-title);
  line-height: .98;
  font-weight: 800;
  letter-spacing: -.01em;
}
html[data-unkwn-design="810"] .u810-section-title {
  font-size: var(--u-type-section);
  line-height: 1.08;
  font-weight: 750;
  letter-spacing: .025em;
  text-transform: uppercase;
}
html[data-unkwn-design="810"] .u810-body,
html[data-unkwn-design="810"] .u810-support {
  font-family: var(--u-font-body);
}
html[data-unkwn-design="810"] .u810-body {
  color: var(--u-text-2);
  font-size: var(--u-type-body);
  line-height: 1.55;
}
html[data-unkwn-design="810"] .u810-support {
  color: var(--u-text-3);
  font-size: var(--u-type-small);
  line-height: 1.45;
}

html[data-unkwn-design="810"] .u810-card,
html[data-unkwn-design="810"] .u810-card-raised {
  position: relative;
  border: 1px solid var(--u-stroke-soft);
  border-radius: var(--u-radius-lg);
  background:
    linear-gradient(145deg, rgba(255,255,255,.032), rgba(255,255,255,.008) 42%),
    var(--u-surface-1);
  box-shadow: var(--u-shadow-1), var(--u-inset-top);
  overflow: hidden;
}
html[data-unkwn-design="810"] .u810-card-raised {
  background:
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.010) 45%),
    var(--u-surface-2);
  box-shadow: var(--u-shadow-2), var(--u-inset-top);
}
html[data-unkwn-design="810"] .u810-card-gold {
  border-color: var(--u-gold-stroke);
  background:
    radial-gradient(100% 120% at 50% -30%, rgba(214,173,89,.16), transparent 58%),
    linear-gradient(145deg, rgba(255,255,255,.034), rgba(255,255,255,.006)),
    var(--u-surface-1);
}

html[data-unkwn-design="810"] .u810-btn {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  min-height: var(--u-touch-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: var(--u-radius-md);
  border: 1px solid var(--u-stroke);
  background: var(--u-surface-2);
  color: var(--u-text-1);
  font: 700 .875rem/1 var(--u-font-body);
  letter-spacing: .015em;
  box-shadow: var(--u-inset-top);
  transition: transform var(--u-motion-press) ease, border-color var(--u-motion-fast) ease, background var(--u-motion-fast) ease, box-shadow var(--u-motion-fast) ease, opacity var(--u-motion-fast) ease;
  cursor: pointer;
}
html[data-unkwn-design="810"] .u810-btn:active {
  transform: translateY(1px) scale(.985);
  background: var(--u-surface-pressed);
}
html[data-unkwn-design="810"] .u810-btn-primary {
  color: #0a0906;
  border-color: rgba(244,223,171,.62);
  background: linear-gradient(180deg, var(--u-gold-200), var(--u-gold-300) 46%, var(--u-gold-400));
  box-shadow: 0 9px 24px rgba(143,106,52,.22), var(--u-inset-gold);
}
html[data-unkwn-design="810"] .u810-btn-primary:active {
  background: linear-gradient(180deg, #ddbd75, #bd9145);
}
html[data-unkwn-design="810"] .u810-btn-quiet {
  background: rgba(255,255,255,.025);
  border-color: var(--u-stroke-soft);
  color: var(--u-text-2);
}
html[data-unkwn-design="810"] .u810-btn[disabled],
html[data-unkwn-design="810"] .u810-btn[aria-disabled="true"] {
  opacity: .42;
  pointer-events: none;
}

html[data-unkwn-design="810"] .u810-pill {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--u-stroke-soft);
  border-radius: var(--u-radius-pill);
  background: rgba(255,255,255,.025);
  color: var(--u-text-2);
  font: 650 .75rem/1 var(--u-font-body);
  letter-spacing: .025em;
}
html[data-unkwn-design="810"] .u810-pill[aria-selected="true"],
html[data-unkwn-design="810"] .u810-pill.is-selected {
  color: var(--u-gold-100);
  border-color: var(--u-gold-stroke);
  background: var(--u-gold-soft);
}

html[data-unkwn-design="810"] .u810-field,
html[data-unkwn-design="810"] .u810-select {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--u-stroke);
  border-radius: var(--u-radius-md);
  background: var(--u-surface-1);
  color: var(--u-text-1);
  padding: 12px 14px;
  font: 600 .9375rem/1.35 var(--u-font-body);
  box-shadow: var(--u-inset-top);
}
html[data-unkwn-design="810"] textarea.u810-field { min-height: 116px; resize: vertical; }
html[data-unkwn-design="810"] .u810-field::placeholder { color: var(--u-text-4); }

html[data-unkwn-design="810"] .u810-sheet {
  border: 1px solid var(--u-stroke);
  border-bottom: 0;
  border-radius: var(--u-radius-xl) var(--u-radius-xl) 0 0;
  background: rgba(12,12,13,.985);
  box-shadow: 0 -24px 80px rgba(0,0,0,.56), var(--u-inset-top);
  backdrop-filter: blur(20px) saturate(110%);
  -webkit-backdrop-filter: blur(20px) saturate(110%);
}

/* Scripture is a product pillar, not an achievement badge. Quiet, readable, reverent. */
html[data-unkwn-design="810"] .u810-scripture {
  position: relative;
  border: 1px solid rgba(214,173,89,.22);
  border-radius: var(--u-radius-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(214,173,89,.095), transparent 52%),
    var(--u-surface-1);
  padding: 18px 18px 17px;
  box-shadow: var(--u-inset-top);
}
html[data-unkwn-design="810"] .u810-scripture blockquote {
  margin: 0;
  color: rgba(255,255,255,.92);
  font: 560 .98rem/1.6 var(--u-font-scripture);
  letter-spacing: 0;
}
html[data-unkwn-design="810"] .u810-scripture-ref {
  margin-top: 11px;
  color: var(--u-gold-200);
  font: 700 .76rem/1.25 var(--u-font-body);
  letter-spacing: .055em;
  text-transform: uppercase;
}

/*
 * Gentle bridge for existing common controls OUTSIDE the accepted Tracker/Recovery surface.
 * This makes PASS810 visible now without re-geometrizing the workout experience before its
 * dedicated championship visual phase.
 */
html[data-unkwn-design="810"] :where(#screen-more, #screen-bible-library, #screen-bible-verse-detail) :where(.btn, button.btn) {
  -webkit-tap-highlight-color: transparent;
  min-height: 46px;
  border-radius: var(--u-radius-md) !important;
  transition: transform var(--u-motion-press) ease, background-color var(--u-motion-fast) ease, border-color var(--u-motion-fast) ease, box-shadow var(--u-motion-fast) ease, opacity var(--u-motion-fast) ease !important;
}
html[data-unkwn-design="810"] :where(#screen-more, #screen-bible-library, #screen-bible-verse-detail) :where(.btn, button.btn):active {
  transform: translateY(1px) scale(.987);
}
html[data-unkwn-design="810"] :where(#screen-more, #screen-bible-library, #screen-bible-verse-detail) .btn-primary {
  border: 1px solid rgba(244,223,171,.50) !important;
  background: linear-gradient(180deg, var(--u-gold-200), var(--u-gold-300) 48%, var(--u-gold-400)) !important;
  color: #0a0906 !important;
  box-shadow: 0 9px 24px rgba(143,106,52,.20), var(--u-inset-gold) !important;
}
html[data-unkwn-design="810"] :where(#screen-more, #screen-bible-library, #screen-bible-verse-detail) .btn-secondary {
  border: 1px solid var(--u-stroke) !important;
  background: var(--u-surface-2) !important;
  color: var(--u-text-1) !important;
  box-shadow: var(--u-inset-top) !important;
}
html[data-unkwn-design="810"] :where(#screen-more, #screen-bible-library, #screen-bible-verse-detail) .chip {
  min-height: 40px;
  border-radius: var(--u-radius-pill) !important;
  border-color: var(--u-stroke) !important;
  background: rgba(255,255,255,.028) !important;
  font-family: var(--u-font-body);
}
html[data-unkwn-design="810"] :where(#screen-more, #screen-bible-library, #screen-bible-verse-detail) .chip.active,
html[data-unkwn-design="810"] :where(#screen-more, #screen-bible-library, #screen-bible-verse-detail) .chip[aria-selected="true"] {
  color: var(--u-gold-100) !important;
  border-color: var(--u-gold-stroke) !important;
  background: var(--u-gold-soft) !important;
}

/* Settings becomes the first legacy surface bridged into the new softer/tactile grammar. */
html[data-unkwn-design="810"] #screen-more .settings-group {
  border: 1px solid var(--u-stroke-soft) !important;
  border-radius: var(--u-radius-lg) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.026), rgba(255,255,255,.006)), var(--u-surface-1) !important;
  box-shadow: var(--u-inset-top) !important;
  overflow: hidden !important;
}
html[data-unkwn-design="810"] #screen-more .settings-row-title {
  color: var(--u-text-1) !important;
  font-family: var(--u-font-body) !important;
  font-size: .94rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
html[data-unkwn-design="810"] #screen-more .settings-row-desc {
  color: var(--u-text-3) !important;
  font-family: var(--u-font-body) !important;
  font-size: .78rem !important;
  line-height: 1.42 !important;
}
html[data-unkwn-design="810"] #screen-more .settings-sec-label {
  color: var(--u-gold-200) !important;
  font-family: var(--u-font-body) !important;
  font-size: .7rem !important;
  font-weight: 750 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

/* Bible surfaces opt into readable body typography immediately, without redesigning layout yet. */
html[data-unkwn-design="810"] :where(#screen-bible-library, #screen-bible-verse-detail) {
  font-family: var(--u-font-body);
}
html[data-unkwn-design="810"] #screen-bible-verse-detail :where(.bvd-verse, blockquote, p) {
  line-height: 1.62;
}

/* Preserve accessible motion semantics. */
@media (prefers-reduced-motion: reduce) {
  html[data-unkwn-design="810"] *,
  html[data-unkwn-design="810"] *::before,
  html[data-unkwn-design="810"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Compact phones keep breathing room without shrinking critical touch targets. */
@media (max-width: 390px) {
  html[data-unkwn-design="810"] {
    --u-space-6: 22px;
    --u-space-7: 28px;
    --u-radius-lg: 20px;
    --u-radius-xl: 25px;
  }
}