/* Emunity — Design Tokens */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;

  /* Radii */
  --r-card: 20px;
  --r-btn: 12px;
  --r-pill: 9999px;

  /* Type — Geist */
  --font-display: 'Geist', -apple-system, system-ui, sans-serif;
  --font-body: 'Geist', -apple-system, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;

  /* Dark mode (default) — Speakeasy: warm ink, ivory, brass */
  --bg: #0E0E12;
  --surface-1: #1A1815;
  --surface-2: #221F1B;
  --surface-3: #2C2823;
  --border: rgba(241, 233, 210, 0.08);
  --border-strong: rgba(241, 233, 210, 0.16);

  --primary: #C9A86A;       /* brass */
  --primary-2: #D9BC82;
  --primary-soft: rgba(201, 168, 106, 0.16);
  --accent: #C9A86A;
  --accent-soft: rgba(201, 168, 106, 0.14);
  --success: #9CB380;       /* sage */
  --danger: #C5685E;        /* oxblood-ish */

  --text-1: #F1E9D2;        /* ivory */
  --text-2: #B8AE94;
  --text-3: #837A66;

  /* shadows */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.5);
}

[data-mode="light"] {
  --bg: #F2E8D6;            /* paper */
  --surface-1: #FAF3E2;
  --surface-2: #EBDFC4;
  --surface-3: #DDCFAE;
  --border: rgba(14, 14, 18, 0.10);
  --border-strong: rgba(14, 14, 18, 0.18);
  --text-1: #1A1612;
  --text-2: #5C4E3D;
  --text-3: #8A7B65;
  --shadow-card: 0 1px 2px rgba(70, 50, 20, 0.04), 0 6px 18px rgba(70, 50, 20, 0.08);
}

/* Accent themes — all classic ambient palettes */
[data-accent="brass"]    { --primary: #C9A86A; --primary-2: #D9BC82; --primary-soft: rgba(201,168,106,0.16); }
[data-accent="oxblood"]  { --primary: #A03A3F; --primary-2: #C25058; --primary-soft: rgba(160,58,63,0.18); }
[data-accent="sage"]     { --primary: #8FA37A; --primary-2: #A8B89A; --primary-soft: rgba(143,163,122,0.18); }
[data-accent="copper"]   { --primary: #B97A4F; --primary-2: #CE9269; --primary-soft: rgba(185,122,79,0.18); }
/* Legacy accents kept for back-compat */
[data-accent="purple"]   { --primary: #C9A86A; --primary-2: #D9BC82; --primary-soft: rgba(201,168,106,0.16); }
[data-accent="magenta"]  { --primary: #A03A3F; --primary-2: #C25058; --primary-soft: rgba(160,58,63,0.18); }
[data-accent="electric"] { --primary: #8FA37A; --primary-2: #A8B89A; --primary-soft: rgba(143,163,122,0.18); }
[data-accent="amber"]    { --primary: #B97A4F; --primary-2: #CE9269; --primary-soft: rgba(185,122,79,0.18); }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: #1a1a1a;
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}

/* numerics tabular */
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* App scroll containers */
.app-scroll {
  overflow-y: auto;
  scrollbar-width: none;
}
.app-scroll::-webkit-scrollbar { display: none; }

/* placeholder image */
.ph-stripe {
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.04) 0 8px,
      rgba(255,255,255,0.08) 8px 16px);
  position: relative;
}
.ph-stripe::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px; color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* tap response */
.tap { transition: transform .15s cubic-bezier(.2,.7,.3,1); }
.tap:active { transform: scale(0.97); }

/* shimmer */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* confetti */
@keyframes confetti-fall {
  0% { transform: translate(0, -20px) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), 600px) rotate(var(--rot)); opacity: 0; }
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.7; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}

@keyframes slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scale-in {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.sheet-enter { animation: slide-up 0.35s cubic-bezier(.2,.9,.3,1); }
.fade-in { animation: fade-in 0.25s ease; }
.scale-in { animation: scale-in 0.4s cubic-bezier(.2,.9,.3,1.1); }

/* hide outline on focus for prototype */
button { font-family: inherit; }
button:focus { outline: none; }

/* gradient ring for stories (deprecated, kept for safety) */
.story-ring {
  background: conic-gradient(from 220deg, #C9A86A, #B97A4F, #A03A3F, #C9A86A);
}

/* cover overlay */
.cover-grad {
  background: linear-gradient(180deg, transparent 0%, rgba(14,14,18,0.0) 30%, rgba(14,14,18,0.7) 75%, rgba(14,14,18,0.95) 100%);
}