/* Themes. The active profile sets <html data-mode="adult|kids" data-theme="light|dark">
   (js/app.js resolves the "automatic" theme from the operating system). Kids mode is
   always light. */

/* Rounded font for kids mode, bundled so it works offline (SIL Open Font License). */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../assets/fonts/nunito-latin.woff2") format("woff2");
}

/* Shared by every theme: saturated finger colors for the key/finger to use now. */
:root {
  --finger-5-strong: #f0558a;
  --finger-4-strong: #f2b705;
  --finger-3-strong: #2fbf62;
  --finger-2-strong: #4a90f0;
  --finger-thumb-strong: #9aa5b5;
  --finger-on-strong: #111111;
  --color-current-bg: color-mix(in srgb, var(--color-accent) 22%, transparent);
}

[data-mode="kids"] .only-adult,
[data-mode="adult"] .only-kids {
  display: none !important;
}

:root,
[data-mode="adult"] {
  --font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 18px;
  --font-size-h1: 2rem;
  /* Type scale, relative to the base size (each mode sets its own base). Use these steps,
     not sizes of their own; only the keyboard and the text line size from the key size. */
  --text-sm: 0.9rem; /* secondary info: hints, statuses, summaries (the smallest text) */
  --text-md: 1rem; /* body */
  --text-lg: 1.25rem; /* section titles (h2), card titles, highlighted figures */
  --text-xl: 1.6rem; /* big card titles */
  --text-display: 2.2rem; /* big numbers */
  --radius: 8px;
  --focus-width: 3px;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;

  --color-bg: #f7f7f5;
  --color-surface: #ffffff;
  --color-border: #d9d9d6;
  --color-text: #1c1c1e;
  --color-text-muted: #55555a;
  --color-heading: #0f3a6b;
  --color-link: #1d5fa8;
  --color-accent: #1d5fa8;
  --color-accent-hover: #174c87;
  --color-on-accent: #ffffff;
  --color-focus: #c2410c;

  --color-danger: #b42318;
  --color-on-danger: #ffffff;
  --color-star: #b7791f;
  --color-correct: #17703a;
  --color-wrong-text: #a11d16;
  --color-wrong-bg: #fde2e1;
  --color-warning-bg: #fff4d6;
  --color-warning-border: #b7791f;
  --color-key: #ffffff;
  --color-key-text: #1c1c1e;
  --color-key-border: #c9c9c4;
  --finger-5: #f9c9d4;
  --finger-4: #fde68a;
  --finger-3: #bbf7d0;
  --finger-2: #bfdbfe;
  --finger-thumb: #e5e7eb;

  color-scheme: light;
}

[data-mode="adult"][data-theme="dark"] {
  --color-bg: #16181d;
  --color-surface: #1f232b;
  --color-border: #343a46;
  --color-text: #ececf0;
  --color-text-muted: #a8adb7;
  --color-heading: #9cc4ff;
  --color-link: #8bb8ff;
  --color-accent: #8bb8ff;
  --color-accent-hover: #b0cfff;
  --color-on-accent: #0b1a2e;
  --color-focus: #ffb070;

  --color-danger: #ff8a80;
  --color-on-danger: #2a0a08;
  --color-star: #f5b301;
  --color-correct: #6fdc8c;
  --color-wrong-text: #ffc9c4;
  --color-wrong-bg: #5c1d1b;
  --color-warning-bg: #3d3115;
  --color-warning-border: #e0a83a;
  --color-key: #2a2f39;
  --color-key-text: #ececf0;
  --color-key-border: #4a5160;
  --finger-5: #6b2738;
  --finger-4: #5c4a12;
  --finger-3: #1f5135;
  --finger-2: #1e3a64;
  --finger-thumb: #3a3f4a;

  color-scheme: dark;
}

/* Kids mode: always light, bigger type, rounder shapes, playful colors. */
[data-mode="kids"] {
  --font-family: "Nunito", ui-rounded, "Arial Rounded MT Bold", "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-base: 24px;
  --font-size-h1: 2.2rem;
  --radius: 20px;
  --focus-width: 4px;

  --color-bg: #fff6e0;
  --color-surface: #ffffff;
  --color-border: #f2d48a;
  --color-text: #2b2340;
  --color-text-muted: #5b4f6e;
  --color-heading: #6d28d9;
  --color-link: #6d28d9;
  --color-accent: #6d28d9;
  --color-accent-hover: #5b21b6;
  --color-on-accent: #ffffff;
  --color-focus: #db2777;

  --color-danger: #b42318;
  --color-on-danger: #ffffff;
  --color-star: #b7791f;
  --color-correct: #17703a;
  --color-wrong-text: #a11d16;
  --color-wrong-bg: #fde2e1;
  --color-warning-bg: #fff4d6;
  --color-warning-border: #b7791f;
  --color-key: #ffffff;
  --color-key-text: #1c1c1e;
  --color-key-border: #c9c9c4;
  --finger-5: #f9c9d4;
  --finger-4: #fde68a;
  --finger-3: #bbf7d0;
  --finger-2: #bfdbfe;
  --finger-thumb: #e5e7eb;

  color-scheme: light;
}