/*
 * spunto.css — landing service shared stylesheet.
 *
 * Design system: tokens (color palette, font stack, shadow scale) plus
 * component classes (.press-btn, .card, .receipt, .chip, .eyebrow,
 * .stamp, .day-divider, .url-chip, .tool-bubble, .reaction-bubble,
 * .app-tile, .marquee). Universal resets at the bottom.
 *
 * Stage 6 cleanup dropped the legacy Layer 1 — landing templates now
 * reference design-token classes only.
 */

/* ============================================================ */
/* Design system                                                */
/* ============================================================ */

:root {
  /* Colors — design tokens */
  --cream: #efe3c6;
  --cream-deep: #e6d6a8;
  --cream-dark: #d9c48a;
  --paper: #fbf3dc;
  --white: #ffffff;
  --ink: #1f1b3a;
  --ink-soft: #2c2652;
  --ink-mute: #55507a;
  --orange: #e8652a;
  --orange-deep: #c04e18;
  --orange-tint: #f6b58d;
  --blue: #3b4cc0;
  --mint: #7ab89a;
  --rose: #d87e8a;
  --dust: #a59a6e;

  /* Typography */
  --pixel: 'Silkscreen', 'Press Start 2P', monospace;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --body: 'Inter', "Helvetica Neue", system-ui, -apple-system, sans-serif;

  /* Hard shadows */
  --shadow-2: 2px 2px 0 var(--ink);
  --shadow-3: 3px 3px 0 var(--ink);
  --shadow-4: 4px 4px 0 var(--ink);

  /* Spacing scale (informational; rules use raw px for clarity) */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 40px;
  --sp-xxl: 80px;
}

/* --- Typography helpers ------------------------------------- */

.font-pixel { font-family: var(--pixel); }
.font-mono  { font-family: var(--mono); letter-spacing: 0.04em; }
.font-body  { font-family: var(--body); }

/* --- Eyebrow ------------------------------------------------- */
/* Section caption above a heading. Pixel font, all caps. */

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-block;
}
.eyebrow--ink { color: var(--ink); }
.eyebrow--pixel {
  font-family: var(--pixel);
  letter-spacing: 0.15em;
}

/* --- PressButton -------------------------------------------- */
/* The single button in the system. 3 variants × 3 sizes.
   Press animation: rest at offset, hover translates 1px toward shadow,
   :active translates 3px (shadow collapses to 0). */

.press-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--pixel);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 2px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-3);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
  white-space: nowrap;
}
.press-btn:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 var(--ink);
}
.press-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}
.press-btn:disabled,
.press-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-3);
}

.press-btn--primary { background: var(--orange); color: #fff; }
.press-btn--ghost   { background: var(--paper);  color: var(--ink); }
.press-btn--mint    { background: var(--mint);   color: var(--ink); }
.press-btn--ink     {
  background: var(--ink);
  color: var(--cream);
  box-shadow: 3px 3px 0 var(--orange);
}
.press-btn--ink:hover  { box-shadow: 1px 1px 0 var(--orange); }
.press-btn--ink:active { box-shadow: 0 0 0 var(--orange); }

.press-btn--sm { padding: 8px 14px;  font-size: 11px; }
.press-btn--md { padding: 12px 20px; font-size: 12px; }
.press-btn--lg { padding: 16px 28px; font-size: 14px; }

/* --- Card --------------------------------------------------- */

.card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow-4);
  padding: 22px;
  color: var(--ink);
}
.card--cream { background: var(--cream); }
.card--ink   { background: var(--ink); color: var(--cream); }

/* --- Receipt ------------------------------------------------ */
/* Zigzag top edge via clip-path; drop-shadow filter renders the hard
   shadow following the zigzag silhouette. No top border (clip eats it). */

.receipt {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow-4);
  padding: 28px 22px 22px;
  color: var(--ink);
}
@supports (clip-path: polygon(0 0)) {
  .receipt {
    clip-path: polygon(
      0 8px,   3% 0,   6% 8px,   9% 0,  12% 8px,  15% 0,  18% 8px,  21% 0,
      24% 8px, 27% 0,  30% 8px,  33% 0,  36% 8px,  39% 0,  42% 8px,  45% 0,
      48% 8px, 51% 0,  54% 8px,  57% 0,  60% 8px,  63% 0,  66% 8px,  69% 0,
      72% 8px, 75% 0,  78% 8px,  81% 0,  84% 8px,  87% 0,  90% 8px,  93% 0,
      96% 8px, 99% 0, 100% 8px,
      100% 100%, 0 100%
    );
    border: none;
    box-shadow: none;
    filter: drop-shadow(4px 4px 0 var(--ink));
  }
}

/* --- Chip --------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1.5px solid var(--ink);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--ink);
}
.chip--mint   { background: var(--mint);   color: var(--ink); }
.chip--paper  { background: var(--paper);  color: var(--ink); }
.chip--orange { background: var(--orange); color: var(--ink); }
.chip--rose   { background: var(--rose);   color: var(--ink); }
.chip--ink    { background: var(--ink);    color: var(--cream); border-color: var(--ink); }

/* --- Stamp -------------------------------------------------- */
/* Decorative rotated circular/badge stamp. Used at most once per screen. */

.stamp {
  display: inline-block;
  padding: 4px 10px;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: var(--pixel);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  transform: rotate(-2deg);
  box-shadow: var(--shadow-3);
}
.stamp--orange { color: var(--orange); }

/* --- Day divider (chat) ------------------------------------- */

.day-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 4px 0;
}
.day-divider::before,
.day-divider::after {
  content: '';
  flex: 1;
  border-top: 1px dashed var(--ink);
  opacity: 0.4;
}

/* --- URL chip (chat auto-link) ------------------------------ */

.url-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px 2px;
  margin: 0 1px;
  background: var(--mint);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
}
.url-chip::after {
  content: '↗';
  font-size: 10px;
  opacity: 0.7;
}

/* --- Tool-call bubble (chat) -------------------------------- */
/* Replaces legacy .tool-pill in Stage 5. Telegram-style status line. */

.tool-bubble {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow-2);
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink);
  max-width: 85%;
}
.tool-bubble__icon { font-size: 15px; line-height: 1; }
.tool-bubble__time {
  margin-left: 4px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-mute);
}

/* Animated ellipsis: 1 → 2 → 3 dots cycling */
.tool-bubble__ellipsis::after {
  content: '.';
  animation: ellipsis 1.2s steps(3, end) infinite;
}
@keyframes ellipsis {
  0%   { content: '.'; }
  33%  { content: '..'; }
  66%  { content: '...'; }
  100% { content: '.'; }
}

/* --- Reaction bubble (👀) ----------------------------------- */
/* The only round element in the system. */

.reaction-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-2);
  font-size: 14px;
  line-height: 1;
  animation: reaction-pop 220ms cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes reaction-pop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* --- App tile (hub) ----------------------------------------- */

.app-tile {
  width: 56px;
  height: 56px;
  border: 2px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
  background: var(--paper);
}
.app-tile--orange-tint { background: var(--orange-tint); }
.app-tile--mint        { background: var(--mint); }
.app-tile--rose        { background: var(--rose); }
.app-tile--paper       { background: var(--paper); }
.app-tile--cream-deep  { background: var(--cream-deep); }
.app-tile--blue {
  /* 30% opacity blue per spec */
  background: rgba(59, 76, 192, 0.30);
}
@media (max-width: 640px) {
  .app-tile { width: 40px; height: 40px; font-size: 22px; }
}

/* --- Marquee (landing) -------------------------------------- */

.marquee {
  overflow: hidden;
  background: var(--orange);
  color: var(--ink);
  border-top: 3px solid var(--ink);
  border-bottom: 4px solid var(--ink);
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  gap: 24px;
  padding: 18px 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  animation: marquee-slide 28s linear infinite;
  will-change: transform;
}
@keyframes marquee-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track > * { flex-shrink: 0; }

/* --- Hard shadow utilities ---------------------------------- */

.hard-shadow-2 { box-shadow: var(--shadow-2); }
.hard-shadow-3 { box-shadow: var(--shadow-3); }
.hard-shadow-4 { box-shadow: var(--shadow-4); }

/* --- Color utilities ---------------------------------------- */

.text-ink      { color: var(--ink); }
.text-ink-mute { color: var(--ink-mute); }
.text-orange   { color: var(--orange); }
.text-cream    { color: var(--cream); }
.bg-cream      { background: var(--cream); }
.bg-cream-deep { background: var(--cream-deep); }
.bg-paper      { background: var(--paper); }
.bg-ink        { background: var(--ink); }

/* ============================================================ */
/* Universal resets (kept for landing-side templates)            */
/* ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }