/* Momentum design tokens. Single source of truth for the visual system.
   Lifted from the Claude Design handoff. Every screen styles from these. */

:root {
  /* Surfaces (dark, layered, never flat black) */
  --ink: #0b0c0f;
  --raised: #101218;
  --s1: #161922;   /* cards */
  --s2: #1e222c;   /* inputs, idle chips, secondary buttons */
  --s3: #262b37;   /* active controls */

  /* Lines and edges */
  --hairline: rgba(255, 255, 255, 0.07);
  --edge: rgba(255, 255, 255, 0.12);
  --top-hi: rgba(255, 255, 255, 0.05);

  /* Text */
  --text-hi: #f4f6fa;
  --text-mid: #aeb4bf;
  --text-lo: #7a808b;   /* labels only, never body */

  /* Ember: the one accent */
  --ember: #ff6b2c;
  --ember-grad: linear-gradient(135deg, #ffc061, #ff6b2c 55%, #d6321a);
  --ember-bright: #ffb347;   /* PB / positive only */
  --destructive: #c2493a;

  /* Type */
  --display: "Bowlby One", system-ui, sans-serif;
  --body: "Work Sans", system-ui, -apple-system, sans-serif;

  /* Shape and depth */
  --radius: 14px;
  --radius-lg: 20px;
  --card-shadow: inset 0 1px 0 var(--top-hi), 0 12px 28px rgba(0, 0, 0, 0.5);
  --ember-glow: 0 8px 22px rgba(255, 107, 44, 0.4);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--text-hi);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(60% 45% at 12% 0%, rgba(255, 107, 44, 0.08), transparent 60%),
    radial-gradient(60% 55% at 100% 100%, #0e1622, transparent 62%),
    var(--ink);
  min-height: 100vh;
}

/* Fixed corner vignette so the dark has weight */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 110px 28px rgba(0, 0, 0, 0.6);
  z-index: 1;
}

/* Fixed film grain so no surface is ever flat */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("/grain.png");
  background-repeat: repeat;
  opacity: 0.05;
  mix-blend-mode: soft-light;
  z-index: 2;
}

@keyframes emberBreathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 8px 26px rgba(255, 107, 44, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
  50% { box-shadow: 0 12px 42px rgba(255, 107, 44, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}