/* ============================================================
   RETELO — Design tokens
   Canonical palette: "Sage" (warm sage + sand, reading-nook)
   Import this file first; everything else references these vars.
   ============================================================ */

:root {
  /* ---------- Surfaces (warm sand neutrals) ---------- */
  --bg:        #F4F2E9;  /* app background */
  --bg-deep:   #E9E7DA;  /* immersive / overlay background */
  --surface:   #FFFEF9;  /* cards, inputs, menus */
  --surface-2: #EDEEE1;  /* tinted card (daily, active history) */

  /* ---------- Ink (warm near-black text) ---------- */
  --ink:       #28281E;  /* primary text, headings */
  --ink-soft:  #5E6052;  /* secondary text, labels */
  --ink-faint: #97998A;  /* tertiary text, meta, placeholders */

  /* ---------- Lines ---------- */
  --line:      #E2E2D2;  /* default borders */
  --line-soft: #ECECDF;  /* hairlines, dividers */

  /* ---------- Brand: sage green ---------- */
  --primary:        #5F7A55;  /* buttons, active, links */
  --primary-strong: #4C6543;  /* hover / pressed */
  --primary-soft:   #DCE5D2;  /* selected fill, highlight */
  --primary-tint:   #EAEFE2;  /* hover wash, focus ring */

  /* ---------- Accent: honey (sparingly; warmth + glow) ---------- */
  --accent: #C79A5A;

  /* ---------- Semantic: CEFR level badges ---------- */
  --lv-a-bg: #E5EDDF;  --lv-a-fg: #4E6347;  /* A1 / A2 */
  --lv-b-bg: #F4E6CB;  --lv-b-fg: #8A6212;  /* B1 / B2 */
  --lv-c-bg: #E3EAD9;  --lv-c-fg: #4C6543;  /* C1 / C2 */

  /* ---------- Radii ---------- */
  --r-card:  22px;
  --r-mid:   16px;
  --r-input: 13px;
  --r-pill:  999px;

  /* ---------- Shadows (warm, low-opacity brown) ---------- */
  --shadow-sm: 0 1px 2px rgba(60,55,30,.05), 0 1px 1px rgba(60,55,30,.04);
  --shadow-md: 0 10px 30px -12px rgba(60,55,25,.22);
  --shadow-lg: 0 28px 60px -22px rgba(50,46,18,.34);

  /* ---------- Spacing scale (8px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 28px;
  --space-7: 40px;

  /* ---------- Type families ---------- */
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;  /* reading + display */
  --font-ui:    'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* chrome / labels */

  /* ---------- Type scale ---------- */
  --reader-size: 21px;  /* body reading size (tweakable 17–26) */
}

/* ============================================================
   Semantic type roles
   ============================================================ */
.r-display {                 /* hero titles, reader title */
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 34px);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--ink);
}
.r-display-xl {              /* retell invitation */
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
}
.r-title {                   /* section titles (History) */
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.r-reading {                 /* the generated text */
  font-family: var(--font-serif);
  font-weight: 380;
  font-size: var(--reader-size);
  line-height: 1.92;
  color: #34342A;
}
.r-body {                    /* default UI text */
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.r-label {                   /* field labels, strong UI */
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  color: var(--ink-soft);
}
.r-eyebrow {                 /* overline / eyebrow */
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--primary-strong);
}
.r-meta {                    /* dates, counts */
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink-faint);
}