/*
 * Tabi design tokens: a matcha tea house.
 * Layout concept: your Japanese grows the way matcha is made. Levels are the
 * six steps from leaf to bowl, lessons are bowls along a stepping-stone path,
 * and every finished lesson stamps your tea card.
 *
 * Palette: clean white ground, deep tea-green ink, vivid matcha for
 * actions, koicha green for links, sakura and beni (pink-red) for highlights,
 * kinako gold for XP, and a ramp of six tea greens from new bud to koicha.
 * Type: Dela Gothic One (display), Lexend (body), Zen Maru Gothic (Japanese UI),
 * Klee One (teaching glyphs, drawn the way you write them by hand).
 */
:root {
  /* ground + ink */
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --sunk: #F1F6E9;
  --ink: #1F2C1D;
  --ink-2: #475644;
  --ink-3: #5A6954;
  --rule: #E1E8D4;
  --rule-strong: #BFCBA9;

  /* actions: matcha */
  --matcha: #8FBC5C;
  --matcha-strong: #5E8C39;
  --matcha-soft: #E2EECD;
  --matcha-ink: #3D6B25;
  --on-matcha: #182613;

  /* highlights: sakura and beni */
  --sakura: #F4C6D1;
  --sakura-soft: #FBE7EC;
  --beni: #AD3657;
  --on-sakura: #3B1420;

  /* XP, stars, streak */
  --gold: #E2B23F;
  --gold-soft: #F7ECCB;
  --gold-ink: #7A5A0A;
  --flame: #D9692F;

  /* feedback */
  --good: #2E7733;
  --good-soft: #DDEFD3;
  --bad: #B2352A;
  --bad-soft: #FADDD8;
  --on-feedback: #FFFFFF;

  /* tea bowls: glaze of the rim, foam on top */
  --bowl: #3E3A33;
  --foam: rgba(255, 255, 255, 0.42);

  /* the six steps from leaf to bowl: tea colour (same in both themes) + ink for text and lines */
  --tea-sp: #E3F0BF;
  --tea-sg: #CFE6A7;
  --tea-hv: #BADB91;
  --tea-tc: #A3CD7E;
  --tea-sm: #8DBB6D;
  --tea-ko: #76A65B;
  --lv-sp-ink: #587A1B;
  --lv-sg-ink: #4A7726;
  --lv-hv-ink: #3C7030;
  --lv-tc-ink: #306637;
  --lv-sm-ink: #2B5C34;
  --lv-ko-ink: #234F2B;
  --tint: 55%;

  /* memory strength (reviews chart): one hue, light to dark, validated with the dataviz checks */
  --str-1: #95BE7C;
  --str-2: #7DA663;
  --str-3: #66904B;
  --str-4: #507932;
  --str-5: #3A6416;

  /* genko yoshi (manuscript paper) guides: the green-lined kind */
  --genko-edge: rgba(94, 140, 57, 0.55);
  --genko-line: rgba(94, 140, 57, 0.28);

  /* placeholders for assets not generated yet */
  --ph-bg: #E6EDD6;
  --ph-dot: rgba(94, 140, 57, 0.16);
  --ph-edge: rgba(94, 140, 57, 0.38);
  --ph-ink: #4D5D46;

  --shadow-sm: 0 1px 2px rgba(31, 44, 29, 0.06);
  --shadow: 0 1px 2px rgba(31, 44, 29, 0.06), 0 10px 28px rgba(31, 44, 29, 0.08);
  --shadow-lg: 0 2px 6px rgba(31, 44, 29, 0.08), 0 24px 60px rgba(31, 44, 29, 0.14);
  --scrim: rgba(17, 23, 16, 0.5);

  /* type */
  --f-display: "Dela Gothic One", "Zen Maru Gothic", system-ui, sans-serif;
  --f-body: "Lexend", "Zen Maru Gothic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-jp: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", sans-serif;
  --f-kana: "Klee One", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: 1.75rem;
  --t-3xl: 2.25rem;
  --t-hero: clamp(2.2rem, 1.35rem + 3.4vw, 3.9rem);

  /* shape + space */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;
  --max: 1160px;
  --header-h: 64px;
  --tabbar-h: 64px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111710;
    --card: #192117;
    --sunk: #212B1E;
    --ink: #E7EEDC;
    --ink-2: #B4C2A8;
    --ink-3: #93A189;
    --rule: #2C3828;
    --rule-strong: #3C4B36;
    --matcha: #9DCB6C;
    --matcha-strong: #7DAE4F;
    --matcha-soft: #26361D;
    --matcha-ink: #B5DC8B;
    --on-matcha: #132010;
    --sakura: #E8A9B9;
    --sakura-soft: #3B2229;
    --beni: #F29BB3;
    --on-sakura: #2A0E16;
    --gold: #EDC458;
    --gold-soft: #3A3116;
    --gold-ink: #F1D27E;
    --flame: #F08C4E;
    --good: #86D07A;
    --good-soft: #1C3418;
    --bad: #FF8B7B;
    --bad-soft: #3E1D19;
    --on-feedback: #0E1A0B;
    --bowl: #D8CFB9;
    --foam: rgba(255, 255, 255, 0.34);
    --lv-sp-ink: #D3E99F;
    --lv-sg-ink: #C2E39C;
    --lv-hv-ink: #ADDC90;
    --lv-tc-ink: #9AD58E;
    --lv-sm-ink: #8CCB90;
    --lv-ko-ink: #7FC08F;
    --tint: 28%;
    --str-1: #445C20;
    --str-2: #57722F;
    --str-3: #6A893D;
    --str-4: #7EA14D;
    --str-5: #93BA5C;
    --genko-edge: rgba(157, 203, 108, 0.5);
    --genko-line: rgba(157, 203, 108, 0.24);
    --ph-bg: #1E281B;
    --ph-dot: rgba(157, 203, 108, 0.12);
    --ph-edge: rgba(157, 203, 108, 0.32);
    --ph-ink: #A9B89D;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.5);
    --scrim: rgba(4, 8, 4, 0.7);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #111710;
  --card: #192117;
  --sunk: #212B1E;
  --ink: #E7EEDC;
  --ink-2: #B4C2A8;
  --ink-3: #93A189;
  --rule: #2C3828;
  --rule-strong: #3C4B36;
  --matcha: #9DCB6C;
  --matcha-strong: #7DAE4F;
  --matcha-soft: #26361D;
  --matcha-ink: #B5DC8B;
  --on-matcha: #132010;
  --sakura: #E8A9B9;
  --sakura-soft: #3B2229;
  --beni: #F29BB3;
  --on-sakura: #2A0E16;
  --gold: #EDC458;
  --gold-soft: #3A3116;
  --gold-ink: #F1D27E;
  --flame: #F08C4E;
  --good: #86D07A;
  --good-soft: #1C3418;
  --bad: #FF8B7B;
  --bad-soft: #3E1D19;
  --on-feedback: #0E1A0B;
  --bowl: #D8CFB9;
  --foam: rgba(255, 255, 255, 0.34);
  --lv-sp-ink: #D3E99F;
  --lv-sg-ink: #C2E39C;
  --lv-hv-ink: #ADDC90;
  --lv-tc-ink: #9AD58E;
  --lv-sm-ink: #8CCB90;
  --lv-ko-ink: #7FC08F;
  --tint: 28%;
  --str-1: #445C20;
  --str-2: #57722F;
  --str-3: #6A893D;
  --str-4: #7EA14D;
  --str-5: #93BA5C;
  --genko-edge: rgba(157, 203, 108, 0.5);
  --genko-line: rgba(157, 203, 108, 0.24);
  --ph-bg: #1E281B;
  --ph-dot: rgba(157, 203, 108, 0.12);
  --ph-edge: rgba(157, 203, 108, 0.32);
  --ph-ink: #A9B89D;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.5);
  --scrim: rgba(4, 8, 4, 0.7);
  color-scheme: dark;
}

/* ---------- Second colour theme: "Fresh green" (white ground, clear leaf green) ---------- */
:root[data-palette="green"] {
  --sunk: #EFF7F1;
  --ink: #13281A;
  --ink-2: #3F5546;
  --ink-3: #536A5A;
  --rule: #DCEAE0;
  --rule-strong: #B3CDBB;
  --matcha: #3FAE62;
  --matcha-strong: #23884A;
  --matcha-soft: #E0F3E6;
  --matcha-ink: #17683A;
  --on-matcha: #0B2414;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="green"]:not([data-theme="light"]) {
    --sunk: #1A2A20; --rule: #26392D; --rule-strong: #35503F;
    --matcha: #5CC67E; --matcha-strong: #3FAE62; --matcha-soft: #1D3A27; --matcha-ink: #8FE0A8; --on-matcha: #0A2013;
  }
}
:root[data-palette="green"][data-theme="dark"] {
  --sunk: #1A2A20; --rule: #26392D; --rule-strong: #35503F;
  --matcha: #5CC67E; --matcha-strong: #3FAE62; --matcha-soft: #1D3A27; --matcha-ink: #8FE0A8; --on-matcha: #0A2013;
}