/* JHome Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --brand-paper: #ffffff;
  --brand-mist: #e8f4f8;
  --brand-night: #1a2e3a;
  --brand-bay: #336b89;
  --brand-cedar: #a64b1f;
  --brand-brass: #c9a227;
  --surface: var(--brand-paper);
  --surface-alt: var(--brand-mist);
  --ink: var(--brand-night);
  --ink-muted: #526269;
  --line: #dce7ec;
  --line-strong: #7a8f9b;
  --action: var(--brand-night);
  --on-action: var(--brand-paper);
  --action-hover: #2a5570;
  --link: var(--brand-bay);
  --focus: var(--brand-bay);
  --accent: var(--brand-cedar);
  --on-accent: var(--brand-paper);
  --star: var(--brand-brass);
  --success: #187440;
  --danger: #c0392b;
  --whatsapp: #25d366;
  --on-whatsapp: #0d2b1a;
  --scrim: #1a2e3ab8;
  --on-scrim: #ffffff;
  --scrim-ink: #1a2e3a;
  --shadow-raise: 0 2px 8px #1a2e3a3d;
  --shadow-float: 0 16px 48px #1a2e3a33;
  --shadow-modal: 0 24px 80px #0000008c;
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #336b89;
}
[data-theme="bay"] {
  --surface: var(--brand-bay);
  --surface-alt: #2e6280;
  --ink: var(--brand-paper);
  --ink-muted: #e1eff5;
  --line: #4f84a0;
  --line-strong: #b8d4e1;
  --action: var(--brand-paper);
  --on-action: var(--brand-night);
  --action-hover: var(--brand-mist);
  --link: var(--brand-paper);
  --focus: var(--brand-paper);
  --accent: var(--brand-cedar);
  --on-accent: var(--brand-paper);
  --star: var(--brand-brass);
  --success: #d5f8e0;
  --danger: #ffe4dc;
  --shadow-raise: 0 2px 8px #00000040;
  --shadow-float: 0 16px 48px #0000004d;
  --focus-ring: 0 0 0 2px #336b89, 0 0 0 4px #ffffff;
}
[data-theme="night"] {
  --surface: var(--brand-night);
  --surface-alt: #223a48;
  --ink: var(--brand-paper);
  --ink-muted: #b9c9d1;
  --line: #34505f;
  --line-strong: #7f9aa8;
  --action: var(--brand-paper);
  --on-action: var(--brand-night);
  --action-hover: var(--brand-mist);
  --link: #a5cfdf;
  --focus: var(--brand-paper);
  --accent: var(--brand-cedar);
  --on-accent: var(--brand-paper);
  --star: var(--brand-brass);
  --success: #5fd08f;
  --danger: #ff8a7a;
  --shadow-raise: 0 2px 8px #00000059;
  --shadow-float: 0 16px 48px #00000080;
  --focus-ring: 0 0 0 2px #1a2e3a, 0 0 0 4px #ffffff;
}
[data-theme="cedar"] {
  --surface: var(--brand-cedar);
  --surface-alt: #94421b;
  --ink: var(--brand-paper);
  --ink-muted: #ffeadf;
  --line: #b8643a;
  --line-strong: #f4c2a6;
  --action: var(--brand-paper);
  --on-action: var(--brand-night);
  --action-hover: #ffeadf;
  --link: var(--brand-paper);
  --focus: var(--brand-paper);
  --accent: var(--brand-paper);
  --on-accent: var(--brand-cedar);
  --star: #f6d77a;
  --success: #e2fbe9;
  --danger: #ffe4dc;
  --shadow-raise: 0 2px 8px #00000040;
  --shadow-float: 0 16px 48px #0000004d;
  --focus-ring: 0 0 0 2px #a64b1f, 0 0 0 4px #ffffff;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;
  --space-11: 128px;
  --space-12: 160px;
  --radius-0: 0px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --container-max: 1440px;
  --gutter-desktop: 48px;
  --gutter-phone: 16px;
  --header-h: 72px;
  --tile-gap: 16px;
  --feed-gap: 4px;
  --measure: 34em;
  --bp-sm: 600px;
  --bp-md: 960px;
  --bp-lg: 1280px;
  --z-header: 100;
  --z-fab: 999;
  --z-overlay: 1100;
  --z-toast: 1200;
  --font-display: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-text: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.display-1 { font-family: var(--font-display); font-size: 144px; line-height: 0.84; font-weight: 800; letter-spacing: -0.025em; }
.display-2 { font-family: var(--font-display); font-size: 72px; line-height: 0.9; font-weight: 800; letter-spacing: -0.02em; }
.display-3 { font-family: var(--font-display); font-size: 48px; line-height: 0.95; font-weight: 800; letter-spacing: -0.01em; }
.numeral { font-family: var(--font-display); font-size: 144px; line-height: 0.8; font-weight: 800; letter-spacing: -0.03em; }
.title { font-family: var(--font-text); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.01em; }
.lead { font-family: var(--font-text); font-size: 21px; line-height: 32px; font-weight: 400; }
.body { font-family: var(--font-text); font-size: 18px; line-height: 28px; font-weight: 400; }
.body-strong { font-family: var(--font-text); font-size: 18px; line-height: 26px; font-weight: 600; }
.ui { font-family: var(--font-text); font-size: 16px; line-height: 20px; font-weight: 600; }
.small { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-weight: 400; }
.fine { font-family: var(--font-text); font-size: 13px; line-height: 18px; font-weight: 500; }