/* tokens.css — CLAIMtract look and feel. Change a value here, the whole site follows.
   Warm paper (light) is the default look; dark is the second look (toggle in header). */
:root{
  /* Fonts (loaded from Google Fonts in index.html; system fonts are the fallback) */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Type scale */
  --fs-hero: clamp(2.5rem, 9.4vw, 5.4rem);
  --fs-h2: clamp(1.9rem, 4.2vw, 3.2rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: .875rem;

  /* Space and shape */
  --gutter: 16px;
  --maxw: 1180px;
  --radius: 20px;
  --radius-sm: 12px;
  --section-y: clamp(64px, 11vw, 132px);

  /* Sophia (avatar) position and size. Mobile values apply under 900px. */
  --avatar-width: 232px;
  --avatar-ratio: 9 / 16;      /* shape of the video clips */
  --avatar-right: 24px;
  --avatar-top-min: 96px;      /* highest she rides on a wide screen */
  --avatar-bottom-gap: 24px;   /* lowest she rides */
  --avatar-mobile-size: 76px;  /* the bubble on phones */

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur: .45s;
}
/* Default look: warm paper, ink, one burnt-orange accent. Dark stays as the second look (toggle in the header). */
:root, :root[data-theme="light"]{
  --bg: #f4efe6;
  --bg-2: #ebe4d5;
  --surface: #fffdf8;
  --surface-2: #f6efe0;
  --line: rgba(33,26,16,.18);
  --text: #17130d;
  --muted: #4a4337;
  --amber: #b93a0b;
  --amber-ink: #ffffff;
  --mint: #17694b;
  --violet: #7a2a08;
  --warn: #b3260e;
  --ink: #17130d;
  --cream: #f7f1e4;
  --glow-a: rgba(185,58,11,.18);
  --glow-b: rgba(185,58,11,.08);
  --glass: rgba(244,239,230,.9);
  --shadow: 0 18px 44px rgba(33,26,16,.14);
  color-scheme: light;
}
:root[data-theme="dark"]{
  --bg: #12100c;
  --bg-2: #1a1712;
  --surface: #211d16;
  --surface-2: #2a251b;
  --line: rgba(255,240,215,.18);
  --text: #f7f1e4;
  --muted: #c9bfae;
  --amber: #ff8a4c;        /* main call-out colour */
  --amber-ink: #1b0e04;
  --ink: #0b0906;
  --cream: #f7f1e4;    /* text on amber */
  --mint: #4df0c0;         /* "good / working" colour */
  --violet: #ffb089;       /* gradient partner */
  --warn: #ff7a59;         /* stuck / attention */
  --glow-a: rgba(255,179,71,.22);
  --glow-b: rgba(124,108,255,.28);
  --glass: rgba(18,16,12,.9);
  --shadow: 0 24px 60px rgba(0,0,0,.45);
  color-scheme: dark;
}
@media (min-width: 900px){
  :root{ --gutter: 32px; }
}