/* beehoc design system — shared by every page (video lessons, JLPT drill,
   Kids English). Page-specific stylesheets consume these tokens and must
   not hardcode their own colors, so adding a new course page inherits the
   brand automatically.

   Palette: warm honey/amber accent on a chosen warm neutral ground — the
   accent carries the brand, the neutrals stay quiet. Every token is
   defined here in bare :root first (light), then overridden for dark in
   both the system-preference and explicit-toggle cases. */

:root {
  /* Ground + surfaces */
  --bg: #faf7f2;
  --surface: #ffffff;
  --surface-2: #f3eee5;
  --surface-3: #ebe4d8;

  /* Text */
  --ink: #241e16;
  --ink-soft: #5c5247;
  --ink-faint: #6f6557;
  --ink-inverse: #fdfaf5;

  /* Brand accent — honey */
  --accent: #8a5808;
  --accent-hover: #6f4506;
  --accent-soft: #f7e9ce;
  --accent-line: #e0c078;
  --honey-1: #e9b949;
  --honey-2: #c8860d;

  /* Secondary accent — terracotta, used for vocab highlights + alerts */
  --flag: #a53f28;
  --flag-soft: #f8e3db;

  /* Feedback */
  --ok: #2f6b50;
  --ok-soft: #dcece4;

  --line: #e4dccf;
  --line-strong: #d2c6b2;

  /* Second accent — teal, for secondary actions and links beside the honey
     primary (GUI plan 1.3), so not everything clickable is the same brown. */
  --teal: #17756F;
  --teal-soft: #DDF1EE;

  /* One colour per JLPT level (GUI plan 1.3), used on the home page cards
     and through each drill: badge, tabs, progress. Easiest is green,
     hardest red, the way a learner climbs. Dark enough for white text on
     them (4.5:1 or better). */
  --n5: #1D7742; --n5-soft: #DDF3E4;
  --n4: #0F766D; --n4-soft: #D8F1EE;
  --n3: #2A62B8; --n3-soft: #DFEAFA;
  --n2: #6E45B8; --n2-soft: #ECE4F9;
  --n1: #B03532; --n1-soft: #FAE1DF;
  --lv: var(--accent); --lv-soft: var(--accent-soft);

  /* Depth (GUI plan 1.4): cards rest on a soft shadow and lift a little on
     hover; buttons press down. One set, so every page moves together. */
  --shadow-card: 0 1px 2px rgba(36, 30, 22, 0.05), 0 2px 8px rgba(36, 30, 22, 0.05);
  --shadow-lift: 0 2px 4px rgba(36, 30, 22, 0.06), 0 8px 20px rgba(36, 30, 22, 0.10);
  --shadow-btn: 0 2px 0 rgba(36, 30, 22, 0.16);
  --radius-card: 14px;

  /* Proficiency tiers (1 = hardest … 4 = easiest), harmonized warm */
  --tier1: #a53f28;
  --tier1-soft: #f8e3db;
  --tier2: #6e4e92;
  --tier2-soft: #ebe2f4;
  --tier3: #2f6b50;
  --tier3-soft: #dcece4;
  --tier4: #765832;
  --tier4-soft: #f0e7d6;

  /* Typography — Fraunces carries the brand voice, Be Vietnam Pro is
     drawn for Vietnamese diacritics, Noto Sans JP covers CJK glyphs that
     neither Latin face has. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Be Vietnam Pro", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale */
  --text-xs: 11.5px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 21px;
  --text-2xl: 26px;
  --text-3xl: clamp(28px, 4.5vw, 40px);

  /* Spacing + shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(36, 30, 22, 0.06);
  --shadow: 0 4px 14px rgba(36, 30, 22, 0.08);
  --shadow-lg: 0 12px 32px rgba(36, 30, 22, 0.14);

  /* Colours with one fixed job, so no stylesheet writes its own. */
  --video-bg: #000000;                       /* behind a YouTube player */
  --backdrop: rgba(20, 16, 10, 0.55);        /* behind a dialog */
  --brand-google: #4285F4;                   /* the G of "Đăng nhập bằng Google" */
  --fire: #E2661A; --fire-soft: #FDE6CC;     /* the streak flame (drill pages) */
  --kids-tint: #FDE7EE;                      /* the Kids door on the home page */

  /* The French course (fr-drill.html): its own blue, and noun genders. */
  --fr: #2B5FB4; --fr-soft: #E3EBF8;
  --g-m: #2563BA; --g-f: #C8344A; --g-pl: #7848AA;

  /* Kids world (kids-english/, game.html). Bright and the same in both
     themes: the cards stay paper-coloured in the dark one, see
     kids-english/css/styles.css (--k-paper, --k-tile-base). */
  --k-white: #FFFFFF;
  --k-ink-classic: #2B2B2B; --k-ink-warm: #3B2F25; --k-soft-warm: #5F5040;
  --k-star: #F6B93B; --k-star-edge: #B9800F; --k-gold: #F4B000; --k-amber: #C7790F;
  --k-sun: #FFD166; --k-honey: #FFD45C; --k-cream: #FFF6DC; --k-cream-2: #FFF4D6;
  --k-green: #3FA866; --k-green-2: #5CBF7A; --k-green-soft: #D8F3DF;
  --k-blue: #5BA9E8; --k-link: #4E8FE0; --k-blue-soft: #E3F1FB; --k-blue-line: #B9DAF2; --k-sky-soft: #EEF8FF;
  --k-pink: #E2557E; --k-pink-2: #F2789A; --k-pink-soft: #F9C6D6; --k-rose-soft: #FFE4EC; --k-rose-grey: #F3EEF0;
  --k-purple: #8E62D4; --k-purple-soft: #D9C8F5;
  --k-red: #E8262A; --k-wrong: #F08A7A; --k-wrong-soft: #FDE3DE;
  --k-sand: #D8C7AD; --k-switch-off: #C9C0B3;
  --k-mode-memorize: #FFF1D6; --k-mode-recall: #DCF3E4; --k-mode-shadowing: #E2EEFF;
  --k-pair-0: #FFD6E0; --k-pair-1: #C8F5D4; --k-pair-2: #CDE6FF; --k-pair-3: #FFE8A3; --k-pair-4: #E4D4FF;
  --k-shadow: rgba(43, 43, 43, 0.12); --k-scrim: rgba(43, 43, 43, 0.55);
  --k-sticker-shadow: rgba(59, 47, 37, 0.2);
  --k-glow: rgba(255, 255, 255, 0.9); --k-sheen: rgba(255, 255, 255, 0.75);
  --k-sheen-2: rgba(255, 255, 255, 0.45); --k-sheen-3: rgba(255, 255, 255, 0.25);
  --k-press: rgba(0, 0, 0, 0.13);

  /* Layout */
  --page-width: 860px;
  --page-gutter: 20px;
  --header-h: 60px;
  --bottom-nav-h: 60px;  /* the phone's bottom bar, css/nav.css */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17140f;
    --surface: #201b14;
    --surface-2: #2a2319;
    --surface-3: #352c20;

    --ink: #f0e9dd;
    --ink-soft: #b8ac9b;
    --ink-faint: #a89c88;
    --ink-inverse: #1b160f;

    --accent: #e9b949;
    --accent-hover: #f4cc6e;
    --accent-soft: #3a2e15;
    --accent-line: #6b5423;
    --honey-1: #f2c95f;
    --honey-2: #d99b1f;

    --flag: #e08a70;
    --flag-soft: #3d2620;

    --ok: #7fcaa6;
    --ok-soft: #1f3b2d;

    --line: #3a3225;
    --line-strong: #4d4231;

    --teal: #4DC3B8;
    --teal-soft: #173835;
    --n5: #5CC283; --n5-soft: #1C3A27;
    --n4: #3CBBAE; --n4-soft: #133733;
    --n3: #6AA0EA; --n3-soft: #1C2D47;
    --n2: #AE8CEA; --n2-soft: #2D2445;
    --n1: #EE7B77; --n1-soft: #42221F;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.4);
    --shadow-btn: 0 2px 0 rgba(0, 0, 0, 0.45);

    --tier1: #e08a70;
    --tier1-soft: #3d2620;
    --tier2: #c1a8e8;
    --tier2-soft: #302947;
    --tier3: #7fcaa6;
    --tier3-soft: #1f3b2d;
    --tier4: #c9ab7a;
    --tier4-soft: #3a3122;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
    --fire: #FF9A4D; --fire-soft: #452814;
    --kids-tint: #43242F;
    --fr: #8EAEF0; --fr-soft: #1E2A44; --g-m: #8AB4F5; --g-f: #F2909E; --g-pl: #C3A3EE;
  }
}

:root[data-theme="dark"] {
  --bg: #17140f;
  --surface: #201b14;
  --surface-2: #2a2319;
  --surface-3: #352c20;

  --ink: #f0e9dd;
  --ink-soft: #b8ac9b;
  --ink-faint: #a89c88;
  --ink-inverse: #1b160f;

  --accent: #e9b949;
  --accent-hover: #f4cc6e;
  --accent-soft: #3a2e15;
  --accent-line: #6b5423;
  --honey-1: #f2c95f;
  --honey-2: #d99b1f;

  --flag: #e08a70;
  --flag-soft: #3d2620;

  --ok: #7fcaa6;
  --ok-soft: #1f3b2d;

  --line: #3a3225;
  --line-strong: #4d4231;

  --teal: #4DC3B8;
  --teal-soft: #173835;
  --n5: #5CC283; --n5-soft: #1C3A27;
  --n4: #3CBBAE; --n4-soft: #133733;
  --n3: #6AA0EA; --n3-soft: #1C2D47;
  --n2: #AE8CEA; --n2-soft: #2D2445;
  --n1: #EE7B77; --n1-soft: #42221F;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.4);
  --shadow-btn: 0 2px 0 rgba(0, 0, 0, 0.45);

  --tier1: #e08a70;
  --tier1-soft: #3d2620;
  --tier2: #c1a8e8;
  --tier2-soft: #302947;
  --tier3: #7fcaa6;
  --tier3-soft: #1f3b2d;
  --tier4: #c9ab7a;
  --tier4-soft: #3a3122;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --fire: #FF9A4D; --fire-soft: #452814;
  --kids-tint: #43242F;
  --fr: #8EAEF0; --fr-soft: #1E2A44; --g-m: #8AB4F5; --g-f: #F2909E; --g-pl: #C3A3EE;
}

/* A page about one JLPT level puts its class on <body>; everything inside
   that reads --lv takes the level's colour. */
.lv-n5 { --lv: var(--n5); --lv-soft: var(--n5-soft); }
.lv-n4 { --lv: var(--n4); --lv-soft: var(--n4-soft); }
.lv-n3 { --lv: var(--n3); --lv-soft: var(--n3-soft); }
.lv-n2 { --lv: var(--n2); --lv-soft: var(--n2-soft); }
.lv-n1 { --lv: var(--n1); --lv-soft: var(--n1-soft); }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Form controls don't inherit font or color from their ancestors by
   default — without this a <button> falls back to the UA's black text,
   which is invisible on a dark surface. */
button, input, select, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}