/* ==========================================================================
   Teclatlon — Design tokens
   High-contrast light theme. See doc/en/technical.md (accessibility rules).
   ========================================================================== */

:root {
  /* Base colors — accessible light theme */
  --color-bg: #FAF7F2;
  --color-surface: #FFFFFF;
  --color-text: #1A1A2E;
  --color-text-soft: #4A4A68;
  --color-border: #D8D2C8;

  /* Accent + hand/finger palette (used to color the visual keyboard by
     hand or by finger; --accent also doubles as the primary UI
     accent for buttons, links and focus states). */
  --accent: #1B6CA8;         /* blue — left hand / thumbs */
  --accent-soft: #E3EEF6;
  --color-hand-right: #2E7D32;   /* green — right hand / index fingers */
  --color-hand-right-soft: #E6F2E6;
  --color-finger-ring: #C05621;    /* orange — ring fingers */
  --color-finger-ring-soft: #F9EBE2;
  --color-finger-middle: #6B3FA0;     /* purple — middle fingers */
  --color-finger-middle-soft: #EFE8F7;
  --color-finger-pinky: #B3446C;   /* raspberry — little fingers */
  --color-finger-pinky-soft: #F7E8EE;

  /* Feedback */
  --color-success: #2E7D32;
  --color-success-soft: #E6F2E6;
  --color-encourage: #C05621;        /* never an aggressive red for mistakes */
  --color-encourage-soft: #F9EBE2;
  --color-star: #B8860B;

  /* Typography */
  --font: 'Atkinson Hyperlegible', 'Nunito', system-ui, -apple-system, sans-serif;
  --text-base: 20px;
  --text-small: 17px;
  --text-large: 28px;
  --text-title: 36px;

  /* Touch and spacing */
  --button-min: 64px;
  --space: 16px;
  --space-large: 24px;
  --radius: 16px;
  --shadow: 0 2px 8px rgba(26, 26, 46, 0.12);

  /* Visible focus */
  --color-focus: #1B6CA8;

  /* Theme defaults — overridden by [data-theme="dark"] / [data-theme="contrast"] */
  --color-bg: #FAF7F2;
  --color-surface: #FFFFFF;
  --color-text: #1A1A2E;
  --color-text-soft: #4A4A68;
  --color-border: #D8D2C8;
  --accent: #1B6CA8;
  --accent-soft: #E3EEF6;
  --color-success: #2E7D32;
  --color-success-soft: #E6F2E6;
  --color-encourage: #C05621;
  --color-encourage-soft: #F9EBE2;
  --color-shadow: rgba(26, 26, 46, 0.12);
}

/* -------- Dark theme -------- */
[data-theme="dark"] {
  --color-bg: #14161E;
  --color-surface: #1E2230;
  --color-text: #F2F0EA;
  --color-text-soft: #B3B0C8;
  --color-border: #2E3346;
  --accent: #6BB4F2;
  --accent-soft: #19354D;
  --color-success: #7BD389;
  --color-success-soft: #1E2A20;
  --color-encourage: #F2B07A;
  --color-encourage-soft: #2E2418;
  --color-shadow: rgba(0, 0, 0, 0.4);
  /* Hand/finger key backgrounds (keyboard color-coding) — must stay dark
     enough for the near-white --color-text of this theme to read on top.
     --accent-soft (left hand) and --color-hand-right-soft (right hand)
     are pushed further apart in hue/lightness than a plain darkened tint
     would give: at very low lightness, blue and green read as the same
     near-black to the eye, so the left/right key colors were not
     distinguishable in this theme. */
  --color-hand-right-soft: #194D22;
  --color-finger-ring-soft: #2E2418;
  --color-finger-middle-soft: #241E38;
  --color-finger-pinky-soft: #2E1E28;
}

/* -------- High contrast (forced colors) -------- */
[data-theme="contrast"] {
  --color-bg: #000000;
  --color-surface: #000000;
  --color-text: #FFFFFF;
  --color-text-soft: #FFFFFF;
  --color-border: #FFFFFF;
  --accent: #FFFF00;
  --accent-soft: #000000;
  --color-success: #00FF66;
  --color-success-soft: #000000;
  --color-encourage: #FF8800;
  --color-encourage-soft: #000000;
  --color-shadow: rgba(255, 255, 255, 0.5);
  --color-focus: #FFFF00;
  /* Same hand/finger key backgrounds as above: must go black, otherwise
     the white key symbols disappear against their light default soft
     colors (this was the actual bug — right-hand/finger-colored keys
     were unreadable in this theme). */
  --color-hand-right-soft: #000000;
  --color-finger-ring-soft: #000000;
  --color-finger-middle-soft: #000000;
  --color-finger-pinky-soft: #000000;
}



/* -------- Distraction-free mode ("focusModeLabel" -- previously
   called "modo foco"/"focus mode", renamed for clarity: see
   strings.*.js): hides secondary text-based chrome (the keyboard-type
   legend/description and the inline numpad). The on-screen keyboard
   (including the highlighted target key) AND the hand/finger guide
   stay, since for many players the hand picture is the PRIMARY way to
   find the next key, not supporting chrome -- hiding it here would
   work against the whole point of the mode. The keyboard-type buttons
   (Simple/Normal/Extended/Colours) are hidden by a separate, future
   option, not by this one. The on-screen keyboard is never the input;
   it's an anchor (see SPEC.md §2 and the pointer-events:none rule in
   components.css). -------- */
html.focus-mode .keyboard-legend,
html.focus-mode .keyboard-detail,
html.focus-mode .panel-numpad-inline {
  display: none !important;
}

/* -------- Text size steps (controlled by --text-base) -------- */
:root { --text-base: 20px; }
[data-text-size="small"] { --text-base: 18px; }
[data-text-size="large"] { --text-base: 24px; }
[data-text-size="huge"] { --text-base: 30px; }