/* Sente site tokens — Glass (light) and Ink (dark)
   Carried from the app's DesignTokens.swift. Mode follows the system
   setting. There is no manual theme toggle, on the site or in the app.

   The accent appears in exactly three places on the page: the primary
   button, the three step icons, and the provenance pill. Nowhere else. */

:root {
  --background:      #EDEDEA;
  --raised:          #FFFFFF;
  --text-primary:    #1F2022;
  --text-secondary:  #5F5E5A;
  --text-muted:      #A5A49E;
  --accent:          #0F7A62;
  --on-accent:       #FFFFFF;
  --edge:            rgba(31, 32, 34, 0.14);

  --font-sans:  ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-voice: ui-serif, Georgia, "Times New Roman", serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 640px;
  --wide: 1120px;
  --radius: 8px;
  --radius-card: 12px;

  --step-1: 13px;
  --step-2: 14px;
  --step-3: 16px;
  --step-4: 20px;
  --step-5: clamp(42px, 7vw, 76px);

  --lh-tight: 1.25;
  --lh-body:  1.6;
  --lh-voice: 1.7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background:     #17171A;
    --raised:         #232326;
    --text-primary:   #F1EFE8;
    --text-secondary: #A9A79F;
    --text-muted:     #6E6D68;
    --accent:         #5DCAA5;
    --on-accent:      #06332A;
    --edge:           rgba(255, 255, 255, 0.16);
  }
}

/* Two weights only. Never 600 or 700 — they read heavy against this palette. */
body {
  background: var(--background);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 500; line-height: var(--lh-tight); margin: 0; }
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }

/* Assistant text. Serif, on the background, never in a bubble or a card.
   This asymmetry against .said is the primary reason the product does not
   read as a generic AI chat. It is not negotiable. */
.voice {
  font-family: var(--font-voice);
  font-size: 17px;
  line-height: var(--lh-voice);
}

/* The user's own words. The one raised container on the page. */
.said {
  background: var(--raised);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  color: var(--text-secondary);
}

.meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.cta {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius);
  padding: 10px 22px;
  font-family: inherit;
  font-size: var(--step-2);
  cursor: pointer;
}

.provenance {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}