/* Direction: Sahir Industrial — deep navy, white and gold, condensed display type */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #e9ebef;
  --border: #dbe1ea;
  --border-strong: #afb4bc;
  --ink: #0e1b2e;
  --muted: #55627a;
  --accent: #f2b705;
  --accent-hover: #ce9c04;
  --accent-ink: #0e1b2e;
  --accent-text: #8a6300;
  --accent-strong: #876605;
  --accent-soft: #f4edd7;
  --accent-border: #f3da8b;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #d9e8e2;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #ece2dc;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #eddcde;
  --danger-strong: #b91c1c;
  --chart-1: #b38813;
  --chart-2: #4d9a52;
  --chart-3: #158792;
  --chart-4: #6589da;
  --chart-5: #9a579e;
  --chart-6: #d67069;

  --x-navy: #0b1f3a;
  --x-navy-2: #14335f;
  --x-gold: #f5b800;
  --x-on-photo: #ffffff;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 800;
  --radius-card: 10px;
  --radius-btn: 6px;
  --radius-input: 6px;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #070c14;
  --surface: #20242c;
  --surface-2: #131820;
  --border: #2a2e35;
  --border-strong: #51555b;
  --ink: #f4f6f9;
  --muted: #95989d;
  --accent: #f2b705;
  --accent-hover: #f4c22b;
  --accent-ink: #0e1b2e;
  --accent-text: #f2b705;
  --accent-strong: #f2b705;
  --accent-soft: #3b3211;
  --accent-border: #71590d;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0a261d;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2d1c12;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2e1016;
  --danger-strong: #d16969;
  --chart-1: #f2b705;
  --chart-2: #72d977;
  --chart-3: #25bdcb;
  --chart-4: #a1bdfa;
  --chart-5: #d87ddd;
  --chart-6: #fca29a;
}

html, body { overflow-x: hidden; }
.on-navy-soft { color: color-mix(in srgb, var(--x-on-photo) 78%, transparent); }
.hero-shade { background: linear-gradient(90deg, color-mix(in srgb, var(--x-navy) 94%, transparent) 15%, color-mix(in srgb, var(--x-navy) 55%, transparent)); }
.promo-shade { background: linear-gradient(90deg, color-mix(in srgb, var(--x-navy) 92%, transparent) 20%, color-mix(in srgb, var(--x-navy) 25%, transparent)); }
.pcard { transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.pcard:hover { box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .35); transform: translateY(-3px); border-color: var(--x-gold); }
.wish.is-on { color: var(--danger); }
.wish.is-on svg { fill: currentColor; }
.tab.is-active { background: var(--x-navy); color: var(--x-on-photo); }
.map-ph { background-image: linear-gradient(color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--border) 70%, transparent) 1px, transparent 1px); background-size: 32px 32px; }
#toast-s { position: fixed; left: 50%; bottom: 5rem; transform: translate(-50%, 12px); background: var(--x-navy); color: var(--x-on-photo); padding: .75rem 1.25rem; border-radius: 8px; font-weight: 600; font-size: .875rem; opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 80; border-left: 4px solid var(--x-gold); }
#toast-s.show { opacity: 1; transform: translate(-50%, 0); }
details.dd > summary::-webkit-details-marker { display: none; }
@media (prefers-reduced-motion: reduce) { .pcard, .pcard:hover { transform: none; } }
html.reduced-motion .pcard, html.reduced-motion .pcard:hover { transform: none; }