/*
 * SellMate Design System v3 — Stripe-inspired
 * Unified tokens, base styles, and shared components
 * Used across: landing, account, upload, admin, privacy
 */

/* ── Design Tokens ── */
:root {
  /* Brand */
  --purple: #533afd;
  --purple-hover: #4434d4;
  --purple-deep: #2e2b8c;
  --purple-light: #b9b9f9;
  --purple-bg: rgba(83,58,253,0.05);

  /* Typography */
  --heading: #061b31;
  --label: #273951;
  --body: #64748d;

  /* Surface & Borders */
  --surface: #ffffff;
  --border: #e5edf5;
  --bg: #ffffff;
  --bg-muted: #f6f9fc;

  /* Status */
  --green: #15be53;
  --green-text: #108c3d;
  --green-bg: rgba(21,190,83,0.2);
  --green-border: rgba(21,190,83,0.4);
  --red: #e25c53;
  --red-bg: rgba(226,92,83,0.08);
  --orange: #9b6829;

  /* Shadows — Stripe blue-tinted */
  --shadow-blue: rgba(50,50,93,0.25);
  --shadow-black: rgba(0,0,0,0.1);
  --shadow-ambient: rgba(23,23,23,0.08);
  --shadow-soft: rgba(23,23,23,0.06);

  /* Radius — conservative */
  --radius: 6px;
  --radius-sm: 4px;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* Legacy aliases for pages not yet migrated */
  --text-1: var(--heading);
  --text-2: var(--body);
  --text-3: var(--body);
  --blue: var(--purple);
  --glass: var(--surface);
  --glass-thick: var(--surface);
  --glass-border: var(--border);
  --glass-inset: none;
  --blur: none;
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; height: 100%; }

/* ── Base Body ── */
body {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--heading);
  background: var(--bg);
  min-height: 100%;
}

/* Remove glass-morphism ambient backgrounds */
body::before,
body::after {
  display: none;
}

a { color: var(--purple); text-decoration: none; }
a:hover { color: var(--purple-hover); }

/* ── Glass → Clean Surface ── */
.glass {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-ambient) 0px 15px 35px 0px;
}

/* ── Surface Component ── */
.surface {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft) 0px 3px 6px;
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 8px 16px; border: none; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px; font-weight: 400;
  font-feature-settings: "ss01";
  cursor: pointer; transition: all 0.15s;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--purple); color: #fff;
  box-shadow: var(--shadow-blue) 0px 4px 12px -4px, var(--shadow-black) 0px 2px 6px -2px;
}
.btn-primary:hover:not(:disabled) {
  background: var(--purple-hover);
  box-shadow: var(--shadow-blue) 0px 6px 16px -4px, var(--shadow-black) 0px 4px 10px -4px;
  transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.4; cursor: default; }

.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--heading);
}
.btn-secondary:hover { background: var(--bg-muted); }

.btn-blue {
  background: var(--purple); color: #fff;
  box-shadow: var(--shadow-blue) 0px 4px 12px -4px;
}
.btn-blue:hover { background: var(--purple-hover); }

.btn-danger {
  background: var(--red-bg); color: var(--red);
  border: 1px solid rgba(226,92,83,0.15);
}
.btn-danger:hover { background: rgba(226,92,83,0.12); }

/* ── Card ── */
.card {
  border-radius: var(--radius);
  padding: 24px;
}

.card-title {
  font-size: 12px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--label);
  margin-bottom: 18px;
}

/* ── Input ── */
.input {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px; font-weight: 400;
  font-feature-settings: "ss01";
  background: var(--surface);
  outline: none; color: var(--heading);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus {
  border-color: var(--purple);
  box-shadow: 0 0 0 2px rgba(83,58,253,0.15);
}
.input::placeholder { color: var(--body); }

/* ── Nav (shared across pages) ── */
.sm-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 12px 24px;
}
.sm-nav-inner {
  max-width: 1120px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 20px; border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft) 0px 3px 6px;
}
.sm-nav-logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 400; letter-spacing: -0.22px;
  text-decoration: none; color: var(--heading);
}
.sm-nav-logo img { width: 24px; height: 24px; border-radius: 4px; }
.sm-nav-links { display: flex; align-items: center; gap: 20px; }
.sm-nav-links a {
  font-size: 14px; font-weight: 400; color: var(--heading);
  font-feature-settings: "ss01";
  transition: color 0.15s;
}
.sm-nav-links a:hover { color: var(--purple); }

/* ── Language Switcher ── */
.lang-switcher { position: relative; display: inline-block; }
.lang-switcher select {
  appearance: none; -webkit-appearance: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 5px 22px 5px 8px;
  font-size: 12px; font-weight: 400; color: var(--heading);
  cursor: pointer; outline: none; font-family: inherit;
}
.lang-switcher select:hover { background: var(--bg-muted); }
.lang-switcher::after {
  content: '\25BC'; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%); font-size: 8px; color: var(--body);
  pointer-events: none;
}

/* ── Footer (shared) ── */
.sm-footer {
  text-align: center; padding: 32px 24px;
  font-size: 13px; font-weight: 300; color: var(--body);
  border-top: 1px solid var(--border);
}
.sm-footer-links {
  display: flex; justify-content: center; gap: 24px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.sm-footer-links a {
  color: var(--body); font-size: 14px; font-weight: 400;
  transition: color 0.15s;
}
.sm-footer-links a:hover { color: var(--heading); }

/* ── Status Indicator ── */
.status {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  background: var(--bg-muted);
  border: 1px solid var(--border);
  font-size: 12px; font-weight: 400; color: var(--body);
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--body);
  transition: background 0.3s, box-shadow 0.3s;
}
.status.connected .status-dot {
  background: var(--green);
  box-shadow: 0 0 6px rgba(21,190,83,0.5);
}
.status.connecting .status-dot {
  background: var(--orange);
  box-shadow: 0 0 6px rgba(155,104,41,0.5);
  animation: sm-blink 1s ease-in-out infinite;
}

/* ── Animations ── */
@keyframes sm-fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes sm-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── Utility ── */
.hidden { display: none !important; }

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}
.reveal.visible {
  opacity: 1; transform: translateY(0);
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}