/* ============================================================
   house.css — StallionHouse shared foundation.
   Loaded FIRST on every page (before sh-ui.css and each page's
   inline <style>), so later rules always win the cascade.
   Scope: fonts, tokens, reset, focus, motion, safe-area.
   The visual register is selected by js/theme.js before first paint.
   Every route shares these semantic tokens: four palettes, Day + Night.
   ============================================================ */

/* ── Playfair Display — self-hosted variable font (latin subset).
      Display voice only; body text never waits on it. ── */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/playfair-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/playfair-italic-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Silver / Navy / Crimson is the default for a first visit. */
:root,
[data-theme="silver-navy-crimson"][data-mode="night"] {
  --bg: #07101b;
  --bg-deep: #0d1928;
  --panel: #132236;
  --panel-edge: #304359;
  --text: #eef2f5;
  --muted: #a8b4bf;
  --brass: #c5cdd3;
  --brass-soft: #f1f4f6;
  --brass-ink: #07101b;
  --oxblood: #a92c3a;
  --oxblood-soft: #e65b69;
  --oxblood-ink: #fff0f2;
  --keyai: #6f8da8;
  --keyai-soft: #b9c9d8;
  --shadow: 0 6px 24px rgba(16, 29, 45, 0.42), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-deep: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.32);
  --srf-body: linear-gradient(160deg, #1a2c43 0%, #132236 45%, #0e1a2a 100%);
  --srf-rim: rgba(241, 244, 246, 0.16);
  --srf-spec: rgba(238, 242, 245, 0.06);
  --chrome-bg: rgba(13, 25, 40, 0.84);
  --backdrop: rgba(3, 9, 16, 0.76);
  --backdrop-strong: rgba(3, 9, 16, 0.96);
  --hero-glow-a: rgba(197, 205, 211, 0.16);
  --hero-glow-b: rgba(169, 44, 58, 0.24);
  --accent-wash: rgba(197, 205, 211, 0.14);
  --accent-line: rgba(197, 205, 211, 0.32);
  --heat-wash: rgba(169, 44, 58, 0.18);
  --avatar-shade: #59151f;
}

[data-theme="silver-navy-crimson"][data-mode="day"] {
  --bg: #eef1f3;
  --bg-deep: #dce3e8;
  --panel: #f8fafb;
  --panel-edge: #b8c2ca;
  --text: #101d2d;
  --muted: #50606f;
  --brass: #203e5d;
  --brass-soft: #365f88;
  --brass-ink: #f7fbff;
  --oxblood: #9f2331;
  --oxblood-soft: #bd3444;
  --oxblood-ink: #fff4f5;
  --keyai: #496f8e;
  --keyai-soft: #244d6d;
  --shadow: 0 6px 24px rgba(32, 62, 93, 0.14), 0 2px 8px rgba(16, 29, 45, 0.1);
  --shadow-deep: 0 12px 32px rgba(32, 62, 93, 0.16), 0 2px 8px rgba(16, 29, 45, 0.1);
  --srf-body: linear-gradient(160deg, #ffffff 0%, #f8fafb 45%, #e8eef2 100%);
  --srf-rim: rgba(32, 62, 93, 0.24);
  --srf-spec: rgba(255, 255, 255, 0.62);
  --chrome-bg: rgba(220, 227, 232, 0.86);
  --backdrop: rgba(16, 29, 45, 0.42);
  --backdrop-strong: rgba(16, 29, 45, 0.92);
  --hero-glow-a: rgba(32, 62, 93, 0.13);
  --hero-glow-b: rgba(159, 35, 49, 0.1);
  --accent-wash: rgba(32, 62, 93, 0.12);
  --accent-line: rgba(32, 62, 93, 0.26);
  --heat-wash: rgba(159, 35, 49, 0.1);
  --avatar-shade: #52131d;
}

[data-theme="sage-bronze-navy"][data-mode="night"] {
  --bg: #0b1411;
  --bg-deep: #121d19;
  --panel: #1a2822;
  --panel-edge: #35483e;
  --text: #edf0e7;
  --muted: #a8b29f;
  --brass: #b97b36;
  --brass-soft: #d69a52;
  --brass-ink: #140c05;
  --oxblood: #243d5b;
  --oxblood-soft: #5d7da3;
  --oxblood-ink: #edf6ff;
  --keyai: #6f9081;
  --keyai-soft: #abc8b9;
  --shadow: 0 6px 24px rgba(19, 42, 31, 0.42), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-deep: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.32);
  --srf-body: linear-gradient(160deg, #21332b 0%, #1a2822 45%, #111d18 100%);
  --srf-rim: rgba(214, 154, 82, 0.16);
  --srf-spec: rgba(237, 240, 231, 0.06);
  --chrome-bg: rgba(18, 29, 25, 0.84);
  --backdrop: rgba(5, 12, 9, 0.76);
  --backdrop-strong: rgba(5, 12, 9, 0.96);
  --hero-glow-a: rgba(111, 144, 129, 0.2);
  --hero-glow-b: rgba(185, 123, 54, 0.18);
  --accent-wash: rgba(185, 123, 54, 0.14);
  --accent-line: rgba(185, 123, 54, 0.32);
  --heat-wash: rgba(36, 61, 91, 0.2);
  --avatar-shade: #162a40;
}

[data-theme="sage-bronze-navy"][data-mode="day"] {
  --bg: #e8ede3;
  --bg-deep: #d9e1d3;
  --panel: #f6f4eb;
  --panel-edge: #b9c4ae;
  --text: #17221e;
  --muted: #5d6858;
  --brass: #8f5f24;
  --brass-soft: #aa7530;
  --brass-ink: #fff8ea;
  --oxblood: #1e3a5a;
  --oxblood-soft: #315a84;
  --oxblood-ink: #eef7ff;
  --keyai: #5f7f70;
  --keyai-soft: #315a4a;
  --shadow: 0 6px 24px rgba(48, 74, 59, 0.14), 0 2px 8px rgba(23, 34, 30, 0.1);
  --shadow-deep: 0 12px 32px rgba(48, 74, 59, 0.16), 0 2px 8px rgba(23, 34, 30, 0.1);
  --srf-body: linear-gradient(160deg, #fffdf5 0%, #f6f4eb 45%, #e9ecdf 100%);
  --srf-rim: rgba(143, 95, 36, 0.24);
  --srf-spec: rgba(255, 255, 255, 0.62);
  --chrome-bg: rgba(217, 225, 211, 0.86);
  --backdrop: rgba(23, 34, 30, 0.42);
  --backdrop-strong: rgba(23, 34, 30, 0.92);
  --hero-glow-a: rgba(95, 127, 112, 0.16);
  --hero-glow-b: rgba(143, 95, 36, 0.12);
  --accent-wash: rgba(143, 95, 36, 0.12);
  --accent-line: rgba(143, 95, 36, 0.26);
  --heat-wash: rgba(30, 58, 90, 0.1);
  --avatar-shade: #122b45;
}

[data-theme="teal-bronze-crimson"][data-mode="night"] {
  --bg: #071616;
  --bg-deep: #0d2221;
  --panel: #132e2d;
  --panel-edge: #2d5551;
  --text: #edf4f1;
  --muted: #9eb9b3;
  --brass: #c4833a;
  --brass-soft: #dfa457;
  --brass-ink: #160d05;
  --oxblood: #8c2632;
  --oxblood-soft: #c94858;
  --oxblood-ink: #fff2f4;
  --keyai: #4f9a95;
  --keyai-soft: #96d4cf;
  --shadow: 0 6px 24px rgba(6, 53, 50, 0.42), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-deep: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.32);
  --srf-body: linear-gradient(160deg, #1a3a38 0%, #132e2d 45%, #0d2221 100%);
  --srf-rim: rgba(223, 164, 87, 0.16);
  --srf-spec: rgba(237, 244, 241, 0.06);
  --chrome-bg: rgba(13, 34, 33, 0.84);
  --backdrop: rgba(2, 12, 12, 0.76);
  --backdrop-strong: rgba(2, 12, 12, 0.96);
  --hero-glow-a: rgba(79, 154, 149, 0.23);
  --hero-glow-b: rgba(140, 38, 50, 0.22);
  --accent-wash: rgba(196, 131, 58, 0.14);
  --accent-line: rgba(196, 131, 58, 0.32);
  --heat-wash: rgba(140, 38, 50, 0.18);
  --avatar-shade: #5e1721;
}

[data-theme="teal-bronze-crimson"][data-mode="day"] {
  --bg: #e2efed;
  --bg-deep: #cfe2df;
  --panel: #f5f4ec;
  --panel-edge: #a7c2be;
  --text: #102423;
  --muted: #526c68;
  --brass: #92601f;
  --brass-soft: #b1732a;
  --brass-ink: #fff8eb;
  --oxblood: #932737;
  --oxblood-soft: #b53647;
  --oxblood-ink: #fff1f3;
  --keyai: #24736f;
  --keyai-soft: #15524f;
  --shadow: 0 6px 24px rgba(36, 115, 111, 0.14), 0 2px 8px rgba(16, 36, 35, 0.1);
  --shadow-deep: 0 12px 32px rgba(36, 115, 111, 0.16), 0 2px 8px rgba(16, 36, 35, 0.1);
  --srf-body: linear-gradient(160deg, #fffdf6 0%, #f5f4ec 45%, #e4eeeb 100%);
  --srf-rim: rgba(146, 96, 31, 0.24);
  --srf-spec: rgba(255, 255, 255, 0.62);
  --chrome-bg: rgba(207, 226, 223, 0.86);
  --backdrop: rgba(16, 36, 35, 0.42);
  --backdrop-strong: rgba(16, 36, 35, 0.92);
  --hero-glow-a: rgba(36, 115, 111, 0.16);
  --hero-glow-b: rgba(147, 39, 55, 0.1);
  --accent-wash: rgba(146, 96, 31, 0.12);
  --accent-line: rgba(146, 96, 31, 0.26);
  --heat-wash: rgba(147, 39, 55, 0.1);
  --avatar-shade: #611523;
}

[data-theme="navy-sage-crimson"][data-mode="night"] {
  --bg: #071020;
  --bg-deep: #0d182b;
  --panel: #142238;
  --panel-edge: #2d425e;
  --text: #eef2ea;
  --muted: #a7b3ad;
  --brass: #8fad80;
  --brass-soft: #bfd2a8;
  --brass-ink: #081106;
  --oxblood: #972b3a;
  --oxblood-soft: #d64a5b;
  --oxblood-ink: #fff2f4;
  --keyai: #6b91a7;
  --keyai-soft: #b2ccda;
  --shadow: 0 6px 24px rgba(7, 25, 50, 0.42), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-deep: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.32);
  --srf-body: linear-gradient(160deg, #1c2d47 0%, #142238 45%, #0e192b 100%);
  --srf-rim: rgba(191, 210, 168, 0.16);
  --srf-spec: rgba(238, 242, 234, 0.06);
  --chrome-bg: rgba(13, 24, 43, 0.84);
  --backdrop: rgba(2, 8, 18, 0.76);
  --backdrop-strong: rgba(2, 8, 18, 0.96);
  --hero-glow-a: rgba(143, 173, 128, 0.17);
  --hero-glow-b: rgba(151, 43, 58, 0.24);
  --accent-wash: rgba(143, 173, 128, 0.14);
  --accent-line: rgba(143, 173, 128, 0.32);
  --heat-wash: rgba(151, 43, 58, 0.18);
  --avatar-shade: #651824;
}

[data-theme="navy-sage-crimson"][data-mode="day"] {
  --bg: #e8edf0;
  --bg-deep: #d8e1e4;
  --panel: #f7f7ee;
  --panel-edge: #bbc8c7;
  --text: #0f1d2d;
  --muted: #56646a;
  --brass: #607b53;
  --brass-soft: #789663;
  --brass-ink: #fbfff5;
  --oxblood: #9a2a3a;
  --oxblood-soft: #bd3a4b;
  --oxblood-ink: #fff2f4;
  --keyai: #3f6d88;
  --keyai-soft: #244f68;
  --shadow: 0 6px 24px rgba(63, 109, 136, 0.14), 0 2px 8px rgba(15, 29, 45, 0.1);
  --shadow-deep: 0 12px 32px rgba(63, 109, 136, 0.16), 0 2px 8px rgba(15, 29, 45, 0.1);
  --srf-body: linear-gradient(160deg, #fffef5 0%, #f7f7ee 45%, #e8eee8 100%);
  --srf-rim: rgba(96, 123, 83, 0.24);
  --srf-spec: rgba(255, 255, 255, 0.62);
  --chrome-bg: rgba(216, 225, 228, 0.86);
  --backdrop: rgba(15, 29, 45, 0.42);
  --backdrop-strong: rgba(15, 29, 45, 0.92);
  --hero-glow-a: rgba(96, 123, 83, 0.14);
  --hero-glow-b: rgba(154, 42, 58, 0.11);
  --accent-wash: rgba(96, 123, 83, 0.12);
  --accent-line: rgba(96, 123, 83, 0.26);
  --heat-wash: rgba(154, 42, 58, 0.1);
  --avatar-shade: #681827;
}

/* Type and layout stay stable across every visual register. */
:root {
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --dock-h: 54px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);

  /* type — three voices: display / reading / UI */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-reading: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --fs-xs: 0.72rem;
  --fs-sm: 0.82rem;
  --fs-base: 0.92rem;
  --fs-md: 1.1rem;
  --fs-lg: 1.35rem;
  --fs-xl: 1.7rem;
  --lh-display: 1.15;
  --lh-ui: 1.5;
  --lh-body: 1.65;
  --lh-reading: 1.75;
  --track-label: 0.06em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Keyboard focus — brass ring, visible everywhere */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced motion — kill all animation/transitions */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Comfortable tap affordance on primary cards (opt-in class) */
.pressable { transition: transform 0.12s ease; }
.pressable:active { transform: scale(0.99); }