/* ============================================================
   wrknode — theme.css
   Clean B&W redesign · Linear/Stripe/Doss aesthetic
   Amber (#F2A93B) stays as the single brand accent.
   Inter (UI) + JetBrains Mono (data) hybrid typography.

   Load order: wrknode.css → site.css → motion.css → theme.css
   This file overrides wrknode.css color tokens and font stacks.
   ============================================================ */

/* ============================================================
   0. Font stack — Inter UI + Mono data hybrid
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

:root {
  --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}


/* ============================================================
   1. Light mode tokens — clean zinc B&W palette
      Replaces the warm amber-tinted "paper" palette entirely.
   ============================================================ */
:root {
  /* ── Surfaces ─────────────────────────────────────────── */
  --ink:        #FFFFFF;       /* pure white — main bg             */
  --ink-2:      #F4F4F5;       /* zinc-100 — panel / inset         */
  --ink-3:      #E4E4E7;       /* zinc-200 — hover bg              */
  --line:       #E4E4E7;       /* zinc-200 — default borders       */
  --line-2:     #A1A1AA;       /* zinc-400 — stronger borders      */

  --paper:      #F4F4F5;       /* panels                           */
  --paper-2:    #E4E4E7;       /* panel inset                      */
  --paper-3:    #D4D4D8;       /* panel grid                       */
  --paper-line: #D4D4D8;       /* zinc-300                         */

  /* ── Text ─────────────────────────────────────────────── */
  --text:       #09090B;       /* zinc-950 — near black            */
  --text-2:     #3F3F46;       /* zinc-700 — secondary             */
  --text-3:     #71717A;       /* zinc-500 — muted / labels        */

  --ink-text:   #09090B;
  --ink-text-2: #3F3F46;
  --ink-text-3: #71717A;

  /* ── Amber accent — unchanged ─────────────────────────── */
  --signal:      #F2A93B;
  --signal-soft: #FDE68A;
  --signal-deep: #92400E;

  /* ── Status ───────────────────────────────────────────── */
  --ok:   #22C55E;             /* green-500   */
  --warn: #F59E0B;             /* amber-500   */
  --crit: #EF4444;             /* red-500     */

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);

  /* Hard offset shadow (brand element — toned down in light) */
  --shadow-hard: 3px 3px 0 var(--line);
  --shadow-hard-text: 3px 3px 0 var(--text);
}


/* ============================================================
   2. Dark mode tokens
      Applied when: system preference OR [data-theme="dark"]
      Overridden back by [data-theme="light"] on light toggle.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* ── Surfaces ─────────────────────────────────────── */
    --ink:        #0A0A0A;     /* near-black main bg (Linear)      */
    --ink-2:      #111111;     /* panel / rail                     */
    --ink-3:      #1C1C1C;     /* hover bg                         */
    --line:       #27272A;     /* zinc-800 — subtle borders        */
    --line-2:     #3F3F46;     /* zinc-700 — stronger borders      */

    --paper:      #111111;
    --paper-2:    #1C1C1C;
    --paper-3:    #27272A;
    --paper-line: #3F3F46;

    /* ── Text ─────────────────────────────────────────── */
    --text:       #FAFAFA;     /* zinc-50 — near white             */
    --text-2:     #A1A1AA;     /* zinc-400 — secondary             */
    --text-3:     #52525B;     /* zinc-600 — muted                 */

    --ink-text:   #FAFAFA;
    --ink-text-2: #A1A1AA;
    --ink-text-3: #52525B;

    /* ── Signal amber — same hue, slightly brightened ─── */
    --signal:      #F2A93B;
    --signal-soft: rgba(242,169,59,0.15);
    --signal-deep: #FDE68A;

    /* ── Status ───────────────────────────────────────── */
    --ok:   #4ADE80;
    --warn: #FBB040;
    --crit: #F87171;

    /* ── Shadows ──────────────────────────────────────── */
    --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
    --shadow-lg:   0 8px 24px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
    --shadow-hard: 3px 3px 0 var(--line);
    --shadow-hard-text: 3px 3px 0 rgba(255,255,255,0.12);
  }
}

/* Explicit dark toggle — highest priority */
[data-theme="dark"] {
  --ink:        #0A0A0A;
  --ink-2:      #111111;
  --ink-3:      #1C1C1C;
  --line:       #27272A;
  --line-2:     #3F3F46;

  --paper:      #111111;
  --paper-2:    #1C1C1C;
  --paper-3:    #27272A;
  --paper-line: #3F3F46;

  --text:       #FAFAFA;
  --text-2:     #A1A1AA;
  --text-3:     #52525B;

  --ink-text:   #FAFAFA;
  --ink-text-2: #A1A1AA;
  --ink-text-3: #52525B;

  --signal:      #F2A93B;
  --signal-soft: rgba(242,169,59,0.15);
  --signal-deep: #FDE68A;

  --ok:   #4ADE80;
  --warn: #FBB040;
  --crit: #F87171;

  --shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-hard: 3px 3px 0 var(--line);
  --shadow-hard-text: 3px 3px 0 rgba(255,255,255,0.12);
}

/* Explicit light toggle (override system dark) */
[data-theme="light"] {
  --ink:        #FFFFFF;
  --ink-2:      #F4F4F5;
  --ink-3:      #E4E4E7;
  --line:       #E4E4E7;
  --line-2:     #A1A1AA;

  --paper:      #F4F4F5;
  --paper-2:    #E4E4E7;
  --paper-3:    #D4D4D8;
  --paper-line: #D4D4D8;

  --text:       #09090B;
  --text-2:     #3F3F46;
  --text-3:     #71717A;

  --ink-text:   #09090B;
  --ink-text-2: #3F3F46;
  --ink-text-3: #71717A;

  --signal:      #F2A93B;
  --signal-soft: #FDE68A;
  --signal-deep: #92400E;

  --ok:   #22C55E;
  --warn: #F59E0B;
  --crit: #EF4444;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-hard: 3px 3px 0 var(--line);
  --shadow-hard-text: 3px 3px 0 var(--text);
}


/* ============================================================
   3. Typography — Inter for UI, Mono for data
   ============================================================ */

/* Base: switch to Inter for all readable UI text */
body {
  font-family: var(--sans);
  letter-spacing: -0.011em;    /* Inter renders tighter than Mono */
  -webkit-font-smoothing: antialiased;
}

/* Nav labels, buttons, headings — Inter */
.nav-section,
.nav-item,
.topbar-label,
.tab-btn,
.topbar-status,
h1, h2, h3, h4, h5, h6,
.section-h,
.hero-h,
.hero-sub,
.hero-eyebrow,
.modal-h,
.sheet-title,
.price-name,
.price-desc,
.feature-card,
.day-h,
.day-desc,
.faq-q,
.faq-body,
.footer-col a,
.footer-col-h,
.site-nav-links a,
.site-nav-cta a,
.waitlist-label,
.compare-table th,
.btn-cta-prim,
.btn-cta-ghost,
button:not(.brand-mark):not(.tab-btn-mono) {
  font-family: var(--sans);
}

/* Keep Mono for data-dense / terminal contexts */
.brand-mark,
.brand-meta,
.statusbar,
.topbar-clock,
.topbar-clock *,
.member-id,
.room-code,
.price-amount,
.pill,
.live,
.tag,
.nav-badge,
.cmdk-search,
.cmdk-search input,
.cmdk-item-kbd,
kbd,
code, pre,
.floor-room-label,
.stat-val,
.stat-label,
table,
.data-cell,
.tic,
.toast .tmsg,
.shortcut-key,
.version-tag,
.v,
.hero-preview,
.hero-preview *,
.mini-floor,
.hero-meta,
.marq,
.hero-dim,
.hero-tick,
.stats-num,
input[type="text"],
input[type="email"],
input[type="number"],
textarea,
select {
  font-family: var(--mono);
}


/* ============================================================
   4. Component overrides — dark-mode hardcoded backgrounds
   ============================================================ */

/* Modals — override hardcoded #FDFCF9 warm white */
.sp,
.cmdk-modal,
.shortcuts-modal {
  background: var(--ink-2) !important;
  border-color: var(--line) !important;
}

/* Modal overlays — neutral dark scrim in both modes */
.cmdk-overlay {
  background: rgba(0,0,0,0.40) !important;
}
[data-theme="dark"] .cmdk-overlay,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cmdk-overlay {
    background: rgba(0,0,0,0.65) !important;
  }
}

.shortcuts-overlay {
  background: rgba(0,0,0,0.40) !important;
}

/* Hard-offset box-shadows — replace with var() so they invert cleanly */
.cmdk-modal {
  box-shadow: 0 0 0 1px var(--line), var(--shadow-hard) !important;
}
.shortcuts-modal {
  box-shadow: 0 0 0 1px var(--line), var(--shadow-hard) !important;
}

/* Site nav backdrop — works in both modes */
.site-nav {
  background: color-mix(in srgb, var(--ink) 88%, transparent) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom-color: var(--line) !important;
}

/* Toast — use CSS vars for bg */
.toast {
  background: var(--ink-2) !important;
  border-color: var(--line-2) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-md), 0 0 0 1px var(--line) !important;
}

/* CMDK search input */
.cmdk-search {
  background: var(--ink) !important;
  border-bottom-color: var(--line) !important;
}

/* Rail + topbar — clean bg in dark */
.shell-rail,
#app {
  background: var(--ink) !important;
}
.topbar {
  background: var(--ink) !important;
  border-bottom-color: var(--line) !important;
}
.statusbar {
  background: var(--ink-2) !important;
  border-top-color: var(--line) !important;
}


/* ============================================================
   5. Refined component aesthetics — cleaner for B&W palette
   ============================================================ */

/* Active nav — softer left-border indicator, no warm bg */
.nav-item.active {
  background: var(--ink-2) !important;
  border-left-color: var(--signal) !important;
  color: var(--text) !important;
}

/* Focus ring — amber stays */
:focus-visible {
  outline: 2px solid var(--signal) !important;
  outline-offset: 2px;
}

/* Scrollbar tracks — use ink-2 in dark */
*::-webkit-scrollbar-track { background: var(--ink) !important; }

/* Input backgrounds */
input, textarea, select {
  background: var(--ink) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-3) !important;
}

/* Price card featured highlight */
.price-card.featured {
  background: var(--ink-2) !important;
  border-color: var(--signal) !important;
}

/* Feature cards — clean border on hover */
.feature-card {
  border-color: var(--line) !important;
  background: var(--ink) !important;
}
.feature-card:hover {
  background: var(--ink-2) !important;
  border-color: var(--line-2) !important;
}

/* Stats band */
.stats-band {
  background: var(--paper) !important;
  border-top-color: var(--line) !important;
  border-bottom-color: var(--line) !important;
}

/* Section paper variant */
.section-paper {
  background: var(--paper) !important;
}

/* CTA button — amber stays vivid in both modes */
.btn-cta-prim,
.site-nav-cta a.prim {
  background: var(--signal) !important;
  border-color: var(--signal) !important;
  color: #09090B !important;                /* always dark text on amber */
  font-weight: 600;
}
.btn-cta-prim:hover,
.site-nav-cta a.prim:hover {
  background: var(--signal-soft) !important;
  border-color: var(--signal-soft) !important;
}

/* Ghost button */
.btn-cta-ghost {
  border-color: var(--line-2) !important;
  color: var(--text-2) !important;
  background: transparent !important;
}
.btn-cta-ghost:hover {
  border-color: var(--text-3) !important;
  background: var(--ink-2) !important;
  color: var(--text) !important;
}

/* Billing toggle */
.btog {
  color: var(--text-3) !important;
}
.btog.active {
  background: var(--signal) !important;
  color: #09090B !important;
}

/* Comparison table */
.compare-table th {
  background: var(--paper) !important;
}
.compare-table td,
.compare-table th {
  border-bottom-color: var(--line) !important;
}
.compare-table .featured-col {
  background: rgba(242,169,59,0.06) !important;
}

/* Footer */
.site-footer {
  background: var(--ink-2) !important;
  border-top-color: var(--line) !important;
}

/* FAQ accordion */
.faq-item {
  border-color: var(--line) !important;
}

/* Brand mark — stays mono as defined */
.brand-mark,
.site-brand {
  font-family: var(--mono) !important;
}

/* Floor plan background */
.floor-svg-bg {
  fill: var(--ink) !important;
}


/* ============================================================
   6. Theme toggle button — injects into #theme-toggle-anchor
      Placed in the dashboard topbar & site nav by theme-toggle.js
   ============================================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
  transition:
    background  150ms cubic-bezier(0, 0, 0.2, 1),
    color       150ms cubic-bezier(0, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0, 0, 0.2, 1);
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--ink-2);
  color: var(--text);
  border-color: var(--line-2);
}
.theme-toggle svg {
  width: 13px;
  height: 13px;
  pointer-events: none;
}

/* Sun icon — shown in dark mode to switch to light */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}


/* ============================================================
   7. Marketing site — hero + section type upgrades
   ============================================================ */

/* Hero heading — Inter at display size */
.hero-h {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.04em;       /* tight tracking = premium Inter look */
  line-height: 1.08;
}

/* Section headings */
.section-h {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Section eyebrows — keep mono for that terminal label feel */
.section-eyebrow,
.hero-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}

/* Refine hero sub */
.hero-sub {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--text-2);
  letter-spacing: -0.01em;
}


/* ============================================================
   8. Dark mode — override remaining hardcoded colors
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body,
  :root:not([data-theme="light"]) #app {
    background: var(--ink);
    color: var(--text);
  }
  :root:not([data-theme="light"]) .hero {
    background: var(--ink);
  }
  :root:not([data-theme="light"]) .final-cta {
    background: var(--ink-2);
  }
}

[data-theme="dark"] body,
[data-theme="dark"] #app { background: var(--ink); color: var(--text); }
[data-theme="dark"] .hero { background: var(--ink); }
[data-theme="dark"] .final-cta { background: var(--ink-2); }


/* ============================================================
   9. Smooth color-scheme transition
   Makes light ↔ dark switching feel premium, not jarring.
   Exempt: images, SVG, the toggle button itself (must be instant).
   ============================================================ */
*:not(img):not(svg):not(canvas):not(.theme-toggle) {
  transition:
    background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color     200ms cubic-bezier(0.4, 0, 0.2, 1),
    color            150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* But don't slow down existing faster micro-interactions */
button,
.nav-item,
.tab-btn,
.feature-card,
.site-nav-links a {
  transition:
    background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color     150ms cubic-bezier(0.16, 1, 0.3, 1),
    color            150ms cubic-bezier(0.16, 1, 0.3, 1),
    transform        200ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow       150ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* ============================================================
   10. prefers-reduced-motion — collapse color transitions too
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *:not(img):not(svg):not(canvas) {
    transition-duration: 0.01ms !important;
  }
}