/* ─────────────────────────────────────────────────────────────────────────────
 * Livetell Landing — paper-theme tokens (v1 light mode only).
 * Distilled from livetell-design-system/project/colors_and_type.css.
 * ───────────────────────────────────────────────────────────────────────────── */

:root {
  --bg:                   #F3EFE9;
  --surface:              #FAF8F5;
  --surface-raised:       #FFFFFF;
  --surface-inset:        #EEEBE5;
  --surface-hover:        #E8E4DD;

  --fg:                   #2C2A26;
  --fg-2:                 #5A5750;
  --fg-3:                 #7A7670;
  --fg-4:                 #B8B3A8;
  --fg-inverse:           #FAF8F5;

  --orange:               #E8642C;
  --orange-soft:          rgba(232,100,44,0.10);
  --orange-softer:        rgba(232,100,44,0.06);
  --orange-ring:          rgba(232,100,44,0.40);

  --border:               rgba(0,0,0,0.06);
  --border-strong:        rgba(0,0,0,0.10);
  --divider:              rgba(0,0,0,0.05);

  --shadow-sm:            0 1px 2px rgba(60,50,40,0.06);
  --shadow-md:            0 2px 8px rgba(60,50,40,0.10);
  --shadow-lg:            0 4px 20px rgba(60,50,40,0.16);

  --r-sm:   6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill: 999px;

  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

/* Signature motion tokens — mirror globals.css in the product codebase */
@keyframes ltpulse  { 0%,100% { transform: scale(1);   opacity: 1;   } 50% { transform: scale(1.5); opacity: 0.4; } }
@keyframes ltblink  { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes ltSeal   { 0% { opacity: 0; transform: scaleY(0.85) translateY(-6px); } 60% { opacity: 1; } 100% { opacity: 1; transform: scaleY(1) translateY(0); } }

/* Parsing overlay — sweeping orange scan line over the concealed note */
@keyframes ltScan {
  0%   { transform: translateY(-100%); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(260%); opacity: 0; }
}
/* Pulsing glow halo around the note card while processing */
@keyframes ltProcessGlow {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(232,100,44,0.28), 0 0 0 0 rgba(232,100,44,0); }
  50%      { box-shadow: inset 0 0 0 1px rgba(232,100,44,0.55), 0 0 24px 2px rgba(232,100,44,0.30); }
}
/* Animated "processing" dots */
@keyframes ltDot {
  0%, 80%, 100% { opacity: 0.25; }
  40%           { opacity: 1; }
}
/* Sealed card entrance */
@keyframes ltFadeIn {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Line-draw — used by the chip-stack chart when it enters */
@keyframes ltDraw {
  0%   { stroke-dashoffset: var(--draw-len, 600); }
  100% { stroke-dashoffset: 0; }
}

/* Responsive collapse points. Class hooks referenced from app.jsx. */
@media (max-width: 1040px) {
  .lt-hero-grid    { grid-template-columns: 1fr !important; gap: 48px !important; }
  .lt-hero-phone   { min-height: 620px !important; order: 2; }
  .lt-demo-grid    { grid-template-columns: 1fr !important; gap: 32px !important; }
}
@media (max-width: 900px) {
  .lt-nav-links    { display: none !important; }
  .lt-ft-grid      { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
  .lt-pr-grid      { grid-template-columns: 1fr !important; gap: 16px !important; }
  .lt-ft-grid      { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 720px) {
  .lt-features-grid { grid-template-columns: 1fr 1fr !important; }
  .lt-tribe-grid    { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .lt-ft-grid       { grid-template-columns: 1fr !important; }
  .lt-features-grid { grid-template-columns: 1fr !important; }
  .lt-hero-pad      { padding-left: 20px !important; padding-right: 20px !important; }
  .lt-sec-pad       { padding-left: 20px !important; padding-right: 20px !important; }
  .lt-demo-pad      { padding: 40px 24px !important; }
  .lt-founder-pad   { padding: 36px 24px !important; }
  .lt-hero-stats    { flex-wrap: wrap; gap: 20px !important; }
}