/* BeFluent design system — the five token files, concatenated.

   Not @import, deliberately. A stylesheet that imports five others makes the
   browser discover them one after the next: six round trips before a single
   rule applies, on pages whose whole argument is that they load fast and need
   no JavaScript. Flattened, it is one request.

   Regenerate with web/scripts/flatten-ds.py after editing anything in tokens/.
*/


/* ── fonts.css ─────────────────────────────────────────── */
/* BeFluent uses a single typeface: Onest, weights 400-800.
   Full Cyrillic + Latin coverage — required, the article mixes Russian examples
   with English explanations inside the same sentence.

   Served from our own origin, NOT from fonts.googleapis.com. That stylesheet
   sends every reader's IP address to Google before they have touched anything,
   and this page is a search landing page — the first contact there is. It is
   the same transfer a German court fined a site operator over in 2022, and the
   same reason web/src/styles.css self-hosts Manrope and Spectral.

   The `-ext` subsets are deliberately not downloaded: the page is English prose
   with Russian examples, and latin-ext/cyrillic-ext cover neither. Ten files,
   240 kB, and a browser fetches only the weights a given screen actually uses.

   To change a weight: download it beside these and declare it here. No build
   step fetches fonts, on purpose. */

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/_ds/fonts/onest-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/_ds/fonts/onest-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/_ds/fonts/onest-500-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/_ds/fonts/onest-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/_ds/fonts/onest-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/_ds/fonts/onest-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/_ds/fonts/onest-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/_ds/fonts/onest-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/_ds/fonts/onest-800-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/_ds/fonts/onest-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-ui: 'Onest', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;
}


/* ── colors.css ─────────────────────────────────────────── */
/* Light theme — the default. Values lifted verbatim from the Camp handoff. */
:root {
  /* surfaces */
  --bg: #f6f7f5;
  --surface: #ffffff;
  --surface-2: #f2f4f2;
  --surface-3: #eef1ee;
  --surface-tint: #f8faf9;      /* menu header band, scores panel */
  --desk: #e9ece9;              /* the page behind a framed screen */
  --field: #ffffff;
  --field-disabled: #f4f6f4;

  /* text */
  --text: #16211f;
  --text-body: #3a4744;
  --text-secondary: #647571;
  --text-muted: #8a978f;
  --text-faint: #b3bdb7;
  --icon-faint: #a3aea8;

  /* lines */
  --hairline: rgba(22, 33, 31, .09);
  --hairline-soft: rgba(22, 33, 31, .07);
  --hairline-strong: #d3dcd7;

  /* brand */
  --accent: #0a7566;
  --accent-solid: #0e9b89;
  --accent-bright: #12a996;
  --accent-soft: #eafaf3;
  --accent-wash: #e6f6f1;
  --accent-tag: #ecfaf6;        /* level tag / week pill fill */
  --accent-on-dark: #5fd6c4;    /* kicker + bar on the ink focus card */
  --brand-grad: linear-gradient(135deg, #12a996, #0a7566);
  --brand-grad-bar: linear-gradient(90deg, #12a996, #0a7566);
  --brand-grad-warm: linear-gradient(160deg, #0e9b89, #0a6f62);
  --ink-grad: linear-gradient(160deg, #16211f, #20302d);
  --video-grad: linear-gradient(160deg, #1f2b29, #0c1615);

  /* roles */
  --success: #16a34a;
  --success-bg: #eafaf1;
  --error: #d1554a;
  --error-bg: #fdecea;
  --danger: #d64545;            /* log out, the one destructive row */
  --danger-bg: #fdecec;
  --warn: #e0913a;
  --info: #2c8fd6;
  --info-bg: #eaf4fb;
  --streak: #ea580c;
  --streak-bg: #fff7ed;
  --gold-bg: #faf6ec;
  --gold: #c8981f;
  --gold-text: #7a6a3f;
  --choice-on: #f0fbf8;
  --choice-on-border: #bfe9df;
  --telegram: #229ed9;

  /* level tag — one component, three levels */
  --level-beginner-bg: #ecfaf6;
  --level-beginner-border: rgba(14, 155, 137, .22);
  --level-beginner-text: #0a7566;
  --level-beginner-dot: #0e9b89;
  --level-intermediate-bg: #fff6e8;
  --level-intermediate-border: rgba(201, 138, 0, .25);
  --level-intermediate-text: #a9720a;
  --level-intermediate-dot: #e0a010;
  --level-advanced-bg: #f3ecfb;
  --level-advanced-border: rgba(122, 76, 192, .25);
  --level-advanced-text: #6a3fb0;
  --level-advanced-dot: #7a4cc0;

  /* plan chip — billing, a different axis from level */
  --plan-basic-bg: #f2f4f2;
  --plan-basic-text: #647571;
  --plan-premium-bg: #ecfaf6;
  --plan-premium-border: rgba(14, 155, 137, .22);
  --plan-premium-text: #0a7566;
  --plan-ultimate-bg: #fdf4e3;
  --plan-ultimate-border: rgba(201, 138, 0, .28);
  --plan-ultimate-text: #a9720a;

  /* score bands — colour always paired with a word, never alone */
  --band-great: #16a34a;
  --band-great-bg: #eaf7ef;
  --band-great-border: #b5e3c4;
  --band-ok: #a9720a;
  --band-ok-bg: #fdf4e3;
  --band-ok-border: #eccf8f;
  --band-review: #dc2626;
  --band-review-bg: #fdecec;
  --band-review-border: #f3b0b0;
  --band-amber: #f59e0b;          /* the results ring at < 60% */
  --answer-wrong: #dc2626;
  --answer-wrong-bg: #fef2f2;
  --answer-wrong-tint: #fee2e2;
  --answer-wrong-text: #b91c1c;
  --answer-right: #16a34a;
  --answer-right-bg: #f0fdf4;
  --answer-right-tint: #dcfce7;
  --track-line: #e7ebe8;
  --behind-ring: #e5b455;
  --behind-glyph: #c98a00;
  --behind-bg: #fdf9ef;
  --behind-border: #f0e3c8;
  --locked-node: #f4f5f3;
  --locked-border: #e7ebe8;

  /* curriculum week band */
  --week-past-bg: #eef3f0;
  --week-past-border: rgba(14, 155, 137, .14);
  --week-now-border: rgba(18, 169, 150, .5);
  --task-done-bg: #f4fbf8;
  --task-done-border: rgba(14, 155, 137, .4);
  --call-accent: #e0607a;
  --call-bg: #fde7ec;
  --call-dashed: #f3b8c4;

  /* action row — done is quiet mint, never the green fill */
  --done-bg: #eef7f2;
  --done-border: rgba(14, 155, 137, .22);
  --done-badge-bg: #dcefe7;
  --done-glyph: #7c9a90;

  /* vocabulary download formats */
  --anki: #2f6bd8;
  --anki-bg: #eef4ff;
  --pdf: #d8455a;
  --pdf-bg: #fdeef0;
  --csv: #0a7566;
  --csv-bg: #eafaf3;
  --ladder-empty: #e6ebe8;
  --photo-scrim: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55));

  /* email letterhead */
  --mail-wash: #f4f8f7;
  --mail-wash-border: rgba(14, 155, 137, .16);
  --mail-muted: #9aa5a0;
  --track-bar-muted: #c3ddd5;

  /* matching-pair highlights, exercises only */
  --pair-1: #0e9b89;
  --pair-2: #e0913a;
  --pair-3: #7c5cd6;
  --pair-4: #db2777;

  /* focus ring — same on every interactive element */
  --focus-ring: 0 0 0 4px rgba(14, 155, 137, .24);
  --focus-ring-soft: 0 0 0 4px rgba(14, 155, 137, .14);
}

/* Dark theme — not an inversion; every role is picked separately.
   Text is #e8efeb (not white) on #0e1412 (not black), and the accent lightens
   because the dark teal disappears on a dark ground. */
[data-theme="dark"] {
  --bg: #0e1412;
  --surface: #19211f;
  --surface-2: #222c29;
  --surface-3: #2a3532;
  --surface-tint: #1d2624;
  --desk: #0a0f0e;
  --field: #121918;
  --field-disabled: #161d1b;

  --text: #e8efeb;
  --text-body: #c0ccc7;
  --text-secondary: #98a6a1;
  --text-muted: #7f8d87;
  --text-faint: #66736e;
  --icon-faint: #6d7b75;

  --hairline: rgba(255, 255, 255, .09);
  --hairline-soft: rgba(255, 255, 255, .07);
  --hairline-strong: #3a4642;

  --accent: #43d6bd;
  --accent-solid: #12b39d;
  --accent-bright: #3fcbb5;
  --accent-soft: #14312c;
  --accent-wash: #14312c;
  --accent-tag: #14312c;
  --accent-on-dark: #5fd6c4;
  --brand-grad: linear-gradient(135deg, #14c4ab, #0c8a78);
  --brand-grad-bar: linear-gradient(90deg, #14c4ab, #0c8a78);

  --success: #4ade80;
  --success-bg: #10291a;
  --error: #f87171;
  --error-bg: #2d1618;
  --danger: #f87171;
  --danger-bg: #2d1618;
  --warn: #e8a95c;
  --info: #5aa9e6;
  --info-bg: #17262f;
  --streak: #fb923c;            /* raw #ea580c sinks into the dark surface */
  --streak-bg: #35220f;
  --gold-bg: #2b2418;
  --gold: #e0b055;
  --gold-text: #dcc790;
  --choice-on: #12312c;
  --choice-on-border: #2f6b5f;

  --level-beginner-bg: #14312c;
  --level-beginner-border: rgba(67, 214, 189, .28);
  --level-beginner-text: #43d6bd;
  --level-beginner-dot: #12b39d;
  --level-intermediate-bg: #2b2418;
  --level-intermediate-border: rgba(224, 176, 85, .28);
  --level-intermediate-text: #e0b055;
  --level-intermediate-dot: #e0a010;
  --level-advanced-bg: #241d3d;
  --level-advanced-border: rgba(167, 139, 250, .3);
  --level-advanced-text: #b79ef5;
  --level-advanced-dot: #a084f0;

  --plan-basic-bg: #222c29;
  --plan-basic-text: #98a6a1;
  --plan-premium-bg: #14312c;
  --plan-premium-border: rgba(67, 214, 189, .28);
  --plan-premium-text: #43d6bd;
  --plan-ultimate-bg: #2b2418;
  --plan-ultimate-border: rgba(224, 176, 85, .3);
  --plan-ultimate-text: #e0b055;

  --band-great: #4ade80;
  --band-great-bg: #10291a;
  --band-great-border: #1f5133;
  --band-ok: #e0b055;
  --band-ok-bg: #2b2418;
  --band-ok-border: #55462a;
  --band-review: #f87171;
  --band-review-bg: #2d1618;
  --band-review-border: #5c2a2a;
  --band-amber: #fbbf24;
  --answer-wrong: #f87171;
  --answer-wrong-bg: #2d1618;
  --answer-wrong-tint: #3a1c1e;
  --answer-wrong-text: #fca5a5;
  --answer-right: #4ade80;
  --answer-right-bg: #10291a;
  --answer-right-tint: #163d24;
  --track-line: #2a3532;
  --behind-ring: #e5b455;
  --behind-glyph: #e0b055;
  --behind-bg: #241f14;
  --behind-border: #45391f;
  --locked-node: #1d2624;
  --locked-border: #2a3532;

  --week-past-bg: #1d2624;
  --week-past-border: rgba(18, 179, 157, .2);
  --week-now-border: rgba(67, 214, 189, .5);
  --task-done-bg: #142a26;
  --task-done-border: rgba(18, 179, 157, .4);
  --call-accent: #f0879d;
  --call-bg: #331a21;
  --call-dashed: #5c3540;

  --done-bg: #14312c;
  --done-border: rgba(18, 179, 157, .28);
  --done-badge-bg: #1a3d36;
  --done-glyph: #6d8f86;

  --anki: #7aa2f0;
  --anki-bg: #1a2338;
  --pdf: #f0879d;
  --pdf-bg: #331a21;
  --csv: #43d6bd;
  --csv-bg: #14312c;
  --ladder-empty: #2a3532;

  --mail-wash: #14312c;
  --mail-wash-border: rgba(18, 179, 157, .2);
  --mail-muted: #7f8d87;
  --track-bar-muted: #2f4a44;

  --pair-1: #2dd4bf;
  --pair-2: #fbbf24;
  --pair-3: #a78bfa;
  --pair-4: #f472b6;
}


/* ── typography.css ─────────────────────────────────────────── */
/* One typeface, ten steps. Negative tracking grows with the size. */
:root {
  --text-display: 800 34px/1.05 var(--font-ui);   /* page H1        ls -1.1px */
  --text-task:    800 25px/1.2  var(--font-ui);   /* task title     ls -.6px  */
  --text-h2:      800 26px/1.15 var(--font-ui);   /* section title  ls -.7px  */
  --text-card:    800 17px/1.3  var(--font-ui);   /* card title     ls -.3px  */
  --text-lead:    500 15px/1.6  var(--font-ui);
  --text-body-f:  400 14.5px/1.6 var(--font-ui);
  --text-label:   700 13px/1.4  var(--font-ui);   /* form label               */
  --text-meta:    500 12.5px/1.5 var(--font-ui);
  --text-section: 700 11px/1.4  var(--font-ui);   /* kicker ls .6px UPPERCASE */
  --text-badge:   800 10.5px/1  var(--font-ui);   /* ls .4px UPPERCASE        */

  --ls-display: -1.1px;
  --ls-task: -.6px;
  --ls-h2: -.7px;
  --ls-card: -.3px;
  --ls-section: .6px;
  --ls-badge: .4px;
}

/* Counts, dates, fractions and score rings always use tabular figures. */
.bf-tabular { font-variant-numeric: tabular-nums; }


/* ── spacing.css ─────────────────────────────────────────── */
/* Radius grows with the element. Never two radii inside one container;
   a nested element takes 4-6 less than its parent. */
:root {
  --r-xs: 6px;    /* checkbox                     */
  --r-day: 9px;   /* curriculum day pill          */
  --r-sm: 10px;   /* menu item, small tile        */
  --r-brand: 11px;/* logo tile, action icon tile  */
  --r-md: 12px;   /* field, form button, banner   */
  --r-cta: 13px;  /* results CTA, answer card     */
  --r-row: 14px;  /* action row, inner card       */
  --r-lg: 16px;   /* menu, topic tile, countdown  */
  --r-card: 18px; /* the card                     */
  --r-frame: 20px;/* the framed screen            */
  --r-sheet: 26px;/* mobile bottom sheet, top corners only */
  --r-pill: 100px;/* chip, badge, pill button     */

  --s-1: 4px;
  --s-2: 8px;     /* band gap, task gap           */
  --s-3: 10px;    /* between action rows          */
  --s-4: 14px;    /* icon to label                */
  --s-5: 20px;    /* grid gap                     */
  --s-6: 24px;    /* card padding                 */
  --s-7: 26px;    /* between page blocks          */
  --s-8: 32px;    /* header side padding          */
  --s-9: 36px;    /* block padding                */

  --shadow-card: 0 1px 2px rgba(22, 33, 31, .04);
  --shadow-frame: 0 8px 30px rgba(22, 33, 31, .09);
  --shadow-menu: 0 16px 40px rgba(22, 33, 31, .16);
  --shadow-drawer: -16px 0 50px rgba(12, 18, 17, .22);
  --shadow-cta: 0 8px 20px rgba(14, 155, 137, .24);
  --shadow-cta-hover: 0 10px 26px rgba(14, 155, 137, .34);
  --shadow-soft: 0 4px 14px rgba(22, 33, 31, .06);
  --shadow-lift: 0 14px 26px rgba(14, 155, 137, .16);
  --scrim: rgba(12, 18, 17, .32);

  --w-container: 1144px;
  --w-frame: 1080px;
  --w-drawer: 452px;
  --w-menu: 262px;
  --w-modal: 440px;
  --w-mail: 600px;
  --w-prose: 74ch;
}

[data-theme="dark"] {
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-frame: 0 8px 30px rgba(0, 0, 0, .45);
  --shadow-menu: 0 16px 40px rgba(0, 0, 0, .5);
  --shadow-soft: 0 4px 14px rgba(0, 0, 0, .35);
}


/* ── motion.css ─────────────────────────────────────────── */
/* One easing family, seven durations. Hover lifts, press settles,
   nothing flashes colour — colour is reserved for meaning. */
:root {
  --ease: cubic-bezier(.4, 0, .2, 1);
  --pop: cubic-bezier(.34, 1.4, .5, 1);
  --pop-soft: cubic-bezier(.34, 1.3, .5, 1);
  --ease-node: cubic-bezier(.2, .7, .3, 1);

  --t-press: .09s;
  --t-hover: .18s;
  --t-color: .22s;
  --t-card: .24s;
  --t-scrim: .26s;
  --t-drawer: .34s;
  --t-band: .4s;
  --t-img: .5s;

  --lift-btn: -1px;
  --lift-card: -4px;
  --lift-photo: -6px;
}

@keyframes bfFadeUp { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes bfPop { 0% { opacity: 0; transform: scale(.5) } 60% { opacity: 1; transform: scale(1.06) } 100% { transform: scale(1) } }
@keyframes bfDraw { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes bfPulse { 0% { box-shadow: 0 0 0 0 rgba(229, 180, 85, .5) } 100% { box-shadow: 0 0 0 12px rgba(229, 180, 85, 0) } }

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