/* ============================================================
   FoundSOS — Noir & Gold Premium Theme (Apple-level minimal)
   Override layer. Loaded LAST in __root.tsx.
   Palette: ink #0d0d0d, surface #FAFAF7, gold #c9a84c, soft #f0d78c
   ============================================================ */

:root, body {
  /* Brand tokens (overrides everywhere) */
  --gold: #c9a84c;
  --gold-2: #b8923a;
  --gold-soft: #f0d78c;
  --gold-grad: linear-gradient(135deg, #d9b96a 0%, #b8923a 100%);
  --ink-noir: #0d0d0d;
  --ink-2-noir: #1a1a1a;
  --paper: #FAFAF7;
  --paper-2: #F2EFE8;
  --hairline: rgba(13,13,13,.08);
  --hairline-strong: rgba(13,13,13,.14);
  --shadow-lux: 0 30px 80px -40px rgba(13,13,13,.25), 0 2px 6px -2px rgba(13,13,13,.06);
}

/* Replace the blue accent system globally with gold */
:root, body, .fsp, .fs2-scan {
  --blue: #0d0d0d;
  --blue-2: #1a1a1a;
  --blue-grad: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
  --signal: var(--gold);
  --signal-deep: var(--gold-2);
}

/* ---------- Typography ---------- */
html, body {
  font-family: 'Work Sans', system-ui, -apple-system, Segoe UI, sans-serif !important;
  font-feature-settings: "ss01","cv11";
  letter-spacing: -0.005em;
  background: var(--paper);
  color: var(--ink-noir);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .font-d, .hero h1, .sec h2, .scr-head h1,
.ed-head h1, .conv-head .ch-name, .auth-title, .brand-name,
.logo-text, .hello h1, .pcard h3 {
  font-family: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  color: var(--ink-noir);
}

h1, .hero h1, .auth-title { letter-spacing: -0.02em; line-height: 1.02; }

/* small caps eyebrow refinement */
.eyebrow, .hero-badge span:last-child, .scr-count {
  font-family: 'Work Sans', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 500;
  font-size: 11px;
  color: rgba(13,13,13,.55);
}

/* ---------- Landing page (foundsos.css) ---------- */
body { background: var(--paper) !important; color: var(--ink-noir) !important; }

.hero, .sec, .scanband, .shop-catalog,
section[class*="hero"], section[class*="sec"] {
  background: transparent !important;
}

.hero { background: radial-gradient(1200px 600px at 50% -100px, rgba(201,168,76,.10), transparent 60%), var(--paper) !important; }

.btn { font-family: 'Work Sans', sans-serif !important; font-weight: 500 !important; letter-spacing: 0.01em; border-radius: 999px !important; transition: all .25s ease; }
.btn-primary { background: var(--ink-noir) !important; color: #fff !important; border: 1px solid var(--ink-noir) !important; box-shadow: 0 10px 30px -12px rgba(13,13,13,.35); }
.btn-primary:hover { background: #000 !important; transform: translateY(-1px); }
.btn-ghost { background: transparent !important; color: var(--ink-noir) !important; border: 1px solid var(--hairline-strong) !important; }
.btn-ghost:hover { background: var(--paper-2) !important; }

.hero-badge { background: #fff !important; border: 1px solid var(--hairline) !important; color: var(--ink-noir) !important; box-shadow: var(--shadow-lux); }
.hero-badge .dot { background: var(--gold) !important; }

h1 .grad, .grad {
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 50%, var(--gold-soft) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Cards */
.pcard, .sd-card, .card, .feat, .price-card {
  background: #fff !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 22px !important;
  box-shadow: var(--shadow-lux);
}

/* Header & footer */
.site-header, header.site-header { background: rgba(250,250,247,.85) !important; backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--hairline) !important; }
.site-footer { background: var(--ink-noir) !important; color: rgba(255,255,255,.7) !important; }
.site-footer a { color: rgba(255,255,255,.7) !important; }
.site-footer a:hover { color: var(--gold-soft) !important; }

/* ---------- Login / Auth ---------- */
.auth-shell, [data-auth-shell] {
  background: radial-gradient(900px 500px at 80% 0%, rgba(201,168,76,.10), transparent 60%), var(--paper) !important;
}
.auth-card, [data-auth-card] {
  background: #fff !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 24px !important;
  box-shadow: 0 40px 120px -50px rgba(13,13,13,.35), 0 2px 6px rgba(13,13,13,.04) !important;
}
input, select, textarea {
  font-family: 'Work Sans', sans-serif !important;
  border-radius: 12px !important;
  border-color: var(--hairline-strong) !important;
  transition: all .2s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,.18) !important;
  outline: none !important;
}

/* ---------- Dashboard (.fsp) ---------- */
.fsp { background: var(--paper) !important; }
.fsp .sidebar { background: linear-gradient(180deg, #0d0d0d 0%, #1a1a1a 100%) !important; border-right: 1px solid rgba(255,255,255,.06) !important; }
.fsp .sidebar .nav a, .fsp .sidebar a { color: rgba(255,255,255,.7) !important; }
.fsp .sidebar .nav a.active, .fsp .sidebar a.active,
.fsp .sidebar .nav a:hover { color: #fff !important; background: rgba(201,168,76,.10) !important; border-left: 2px solid var(--gold) !important; }
.fsp .brand-name, .fsp .logo-text { color: #fff !important; }
.fsp .brand-mark, .fsp .logo-mark { background: var(--gold-grad) !important; color: #0d0d0d !important; }

.fsp .topbar { background: rgba(255,255,255,.78) !important; backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid var(--hairline) !important; }

.fsp .card, .fsp .stat, .fsp .hello, .fsp .msg-item, .fsp .tag, .fsp .ed-card, .fsp .conv-body, .fsp .ds-card {
  background: #fff !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 0 rgba(13,13,13,.02), 0 8px 24px -16px rgba(13,13,13,.10);
}
.fsp .hello { background: linear-gradient(135deg, #fff 0%, var(--paper-2) 100%) !important; }

.fsp .stat .stat-ic, .fsp .pa-ic, .fsp .ti, .fsp .av {
  background: linear-gradient(135deg, rgba(201,168,76,.16), rgba(201,168,76,.06)) !important;
  color: var(--gold-2) !important;
}

.fsp .pill { font-family: 'Work Sans', sans-serif !important; font-weight: 500; letter-spacing: .04em; }
.fsp .pill-active { background: rgba(34,176,122,.10) !important; color: #197a52 !important; }
.fsp .pill-lost { background: rgba(230,57,46,.10) !important; color: #b62a20 !important; }
.fsp .pill-inactive { background: rgba(13,13,13,.06) !important; color: rgba(13,13,13,.6) !important; }

/* Dashboard legibility: keep the premium palette, but use compact sans typography so Bulgarian/German labels never collide. */
.fsp .font-d,
.fsp .hello h1,
.fsp .stat .sv,
.fsp .sec-head h2,
.fsp .tag .tn,
.fsp .ds-h1,
.fsp .ds-h4,
.fsp .ed-htxt h1,
.fsp .ed-title,
.fsp .msg-row-top strong,
.fsp .chat-header-main strong,
.fsp .conv-who .cn {
  font-family: 'Sora', 'Work Sans', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.fsp .hello h1{font-size:clamp(20px,5.2vw,34px) !important;line-height:1.14 !important}
.fsp .stat .sv{font-size:clamp(20px,5vw,28px) !important;line-height:1 !important}
.fsp .stat .sl,
.fsp .pill,
.fsp .eyebrow{letter-spacing:.04em !important}

/* Primary actions become noir, accent gold */
.fsp .btn-primary, .fsp .pa-add, .fsp button.primary, .fsp .ds-btn-primary {
  background: var(--ink-noir) !important;
  color: #fff !important;
  border: 1px solid var(--ink-noir) !important;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px -14px rgba(13,13,13,.5);
}
.fsp .btn-primary:hover, .fsp .pa-add:hover { background: #000 !important; transform: translateY(-1px); }
.fsp .ds-btn-ghost, .fsp .btn-ghost { border: 1px solid var(--hairline-strong) !important; color: var(--ink-noir) !important; background: #fff !important; border-radius: 999px !important; }

/* Gold accent for active toggles / progress / focused chips */
.fsp .switch input:checked + .slider { background: var(--gold) !important; }
.fsp .chip.is-active, .fsp .chip[aria-selected="true"] { background: var(--ink-noir) !important; color: var(--gold-soft) !important; border-color: var(--ink-noir) !important; }

/* Chat bubbles */
.fsp .cmsg.out .cb { background: var(--ink-noir) !important; color: #fff !important; }
.fsp .cmsg.in .cb { background: var(--paper-2) !important; color: var(--ink-noir) !important; }

/* ---------- Scan page (.fs2-scan) ---------- */
.fs2-scan { background: var(--paper) !important; color: var(--ink-noir) !important; font-family: 'Work Sans', sans-serif !important; }
.fs2-scan .fs2-brand, .fs2-scan h1, .fs2-scan h2 { font-family: 'Instrument Serif', serif !important; font-weight: 400 !important; }
.fs2-scan .fs2-card, .fs2-scan [class*="card"] { background: #fff !important; border: 1px solid var(--hairline) !important; border-radius: 20px !important; box-shadow: var(--shadow-lux); }
.fs2-scan .fs2-cta-primary, .fs2-scan .btn-primary { background: var(--ink-noir) !important; color: #fff !important; border-radius: 999px !important; }
.fs2-scan .fs2-protected, .fs2-scan .protected-by { background: #fff !important; border: 1px solid var(--hairline) !important; color: var(--ink-noir) !important; }
.fs2-scan .fs2-protected .dot, .fs2-scan .protected-by .dot { background: var(--gold) !important; }

/* SOS keeps urgency red but with refined styling */
.fs2-scan .sos-btn, .sos-btn { border-radius: 18px !important; font-family: 'Work Sans', sans-serif !important; font-weight: 600 !important; letter-spacing: .02em; }

/* ---------- Selection & links ---------- */
::selection { background: var(--gold-soft); color: var(--ink-noir); }
a { color: var(--ink-noir); }
a:hover { color: var(--gold-2); }

/* ---------- Subtle global polish ---------- */
* { -webkit-tap-highlight-color: transparent; }
.btn, button, a, .pill, .chip { transition: all .22s cubic-bezier(.2,.7,.2,1); }