/* School C «Жива співрозмовниця» — tokens. One family (Commissioner), two voices via the FLAR axis. */
@import url('https://fonts.googleapis.com/css2?family=Commissioner:wght,FLAR@400..700,0..100&family=Noto+Sans+Symbols&display=swap');
/* Noto Sans Symbols: chart glyphs only (U+2609, U+263D-2653), always followed by U+FE0E; never outside the wheel. */

:root {
  /* type */
  --font: 'Commissioner', system-ui, -apple-system, sans-serif;
  --flar-ui: "FLAR" 0;        /* interface: labels, titles, chips */
  --flar-voice: "FLAR" 100;   /* Natalka speaking: flared, human */

  --t-display: 700 24px/30px var(--font);   /* card / section headings */
  --t-title:   700 17px/22px var(--font);   /* card title */
  --t-voice:   500 17px/24px var(--font);   /* Natalka's lines (with --flar-voice) */
  --t-voice-strong: 700 17px/24px var(--font);
  --t-body:    400 16px/22px var(--font);   /* row text, chart text */
  --t-label:   700 14px/18px var(--font);   /* row labels */
  --t-chip:    600 15px/20px var(--font);
  --t-meta:    600 13px/16px var(--font);   /* progress, speaker name, «Перше, що я бачу:» */
  --t-sub:     500 15px/20px var(--font);   /* «Сонце в Леві» */
  --ls-display: -0.01em;
  --t-screen:  700 28px/34px var(--font);   /* product screen title (X1-X3) */
  --t-section: 600 13px/16px var(--font);   /* section header above a card, muted */
  --font-glyph: 'Noto Sans Symbols', sans-serif;

  /* spacing / shape */
  --pad-x: 16px;
  --gap-xs: 4px; --gap-s: 8px; --gap-m: 12px; --gap-l: 16px; --gap-xl: 24px;
  --r-card: 20px;
  --r-voice: 6px 22px 22px 22px;   /* tail corner = top-left, points at the speaker row */
  --r-reply: 22px 22px 6px 22px;   /* user's answer, right-aligned */
  --r-chip: 20px;
  --avatar: 28px;

  /* palette — light */
  --bg: #F3F4F6;            /* app bg = setBackgroundColor */
  --header: #F3F4F6;        /* setHeaderColor */
  --surface: #FFFFFF;
  --line: #E6E6EB;
  --text: #17161C;
  --muted: #6E6D78;
  --voice: #FFE066;         /* sunflower field: the ONE thing Natalka is saying now */
  --voice-ink: #17161C;
  --accent: #17161C;        /* ink: links, selected chip, progress fill */
  --accent-ink: #FFFFFF;
  --marker: #FFE066;        /* highlighter behind opened row labels */
  --progress-off: #DADAE0;
  --main-btn: #17161C;      /* MainButton.setParams color */
  --main-btn-text: #FFE066; /* MainButton.setParams text_color */
  --sec-btn: #FFFFFF;       /* SecondaryButton color */
  --sec-btn-text: #17161C;
  --blur: 6px;
  --blur-opacity: 0.5;
  --nm-tile: #17161C;       /* monogram tile */
  --nm-ink: #FFE066;        /* monogram letters */
  --loader-bg: #FFE066;
  --loader-text: #17161C;
  /* charts */
  --chart-ink: #17161C;     /* outer ring, angles, planet outlines + glyphs */
  --chart-line: #D5D5DC;    /* sign dividers, house cusps */
  --chart-mute: #8A8994;    /* sign glyphs, house numbers */
  --chart-mark: #FFE066;    /* the ONE linked highlight */

  /* motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --unblur-ms: 420ms;
  --marker-ms: 360ms;
  --marker-delay: 200ms;
}

[data-theme="dark"] {
  --bg: #0F0F12;
  --header: #0F0F12;
  --surface: #1B1B20;
  --line: #2A2A31;
  --text: #F2F1F5;
  --muted: #9C9BA8;
  --voice: #F5D547;
  --voice-ink: #17161C;
  --accent: #F2F1F5;
  --accent-ink: #17161C;
  --marker: rgba(245, 213, 71, 0.34);
  --progress-off: #34343C;
  --main-btn: #F5D547;
  --main-btn-text: #17161C;
  --sec-btn: #1B1B20;
  --sec-btn-text: #F2F1F5;
  --blur-opacity: 0.45;
  --nm-tile: #F5D547;
  --nm-ink: #17161C;
  --loader-bg: #0F0F12;
  --loader-text: #F2F1F5;
  --chart-ink: #F2F1F5;
  --chart-line: #34343C;
  --chart-mute: #8C8B97;
  --chart-mark: #F5D547;
}