/* ============================================================
   CHATTUMBO — DESIGN TOKENS
   Subject: an 18+ audio-only social network. The signature motif
   is a single continuous waveform line — it opens the hero, marks
   section boundaries, fills the Founding 1,000 progress meter, and
   turns jagged + hot when it crosses into Swear Jar.
   ============================================================ */

:root {
  /* ---- Color: light mode (primary) ---- */
  --ct-bg:            #FAF8F4;   /* warm white */
  --ct-bg-raised:     #FFFFFF;
  --ct-bg-sunken:     #F1EEE7;
  --ct-ink:           #16150F;   /* near-black text */
  --ct-ink-soft:      #57534A;   /* medium gray secondary text */
  --ct-ink-faint:     #8A8579;
  --ct-border:        #E3DED2;   /* subtle gray border */
  --ct-border-strong: #CFC8B8;

  --ct-accent:        #B8863A;   /* Signal Amber — restrained, warm, premium */
  --ct-accent-ink:    #7A5A22;   /* accent text on light bg (AA contrast) */
  --ct-accent-soft:   #F1E4CC;   /* accent tint for chips/backgrounds */
  --ct-accent-line:   #C9A15E;

  --ct-focus:         #1F5DDB;   /* visible keyboard focus, distinct from accent */

  /* ---- Color: Swear Jar (dark, separate mode) ---- */
  --ct-jar-bg:         #100D0B;
  --ct-jar-bg-raised:  #1B1613;
  --ct-jar-ink:        #F4EEE4;
  --ct-jar-ink-soft:   #B7ADA0;
  --ct-jar-border:     #332A24;
  --ct-jar-accent:     #E15A2E;  /* hot / cost signal, distinct from Signal Amber */
  --ct-jar-accent-soft: #3A1E14;

  /* ---- Type ---- */
  --ct-font-display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --ct-font-body:     "Inter", "Segoe UI", system-ui, sans-serif;
  --ct-font-mono:     "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --ct-size-xs:   0.8125rem;
  --ct-size-sm:   0.9375rem;
  --ct-size-base: 1.0625rem;
  --ct-size-lg:   1.25rem;
  --ct-size-xl:   1.6rem;
  --ct-size-2xl:  2.1rem;
  --ct-size-3xl:  2.9rem;
  --ct-size-4xl:  4rem;

  /* ---- Layout ---- */
  --ct-maxw:      1120px;
  --ct-maxw-narrow: 760px;
  --ct-gutter:    24px;
  --ct-radius-sm: 8px;
  --ct-radius:    14px;
  --ct-radius-lg: 22px;

  --ct-space-1: 6px;
  --ct-space-2: 12px;
  --ct-space-3: 20px;
  --ct-space-4: 32px;
  --ct-space-5: 52px;
  --ct-space-6: 84px;
  --ct-space-7: 128px;

  --ct-shadow-sm: 0 1px 2px rgba(22,21,15,0.06);
  --ct-shadow:    0 8px 30px rgba(22,21,15,0.08);
  --ct-shadow-lg: 0 24px 60px rgba(22,21,15,0.14);

  --ct-ease: cubic-bezier(.22,.9,.3,1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}