/* tokens.css — Oyen Cerdik design tokens (from Figma + brand guide) */

/* Display / heading / button font — self-hosted Letter Magic */
@font-face {
  font-family: "Letter Magic";
  src: url("../../Fonts/Letter%20Magic.ttf") format("truetype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color system ---- */
  --orange: #ff6600;          /* primary 60% */
  --orange-hover: #ff7a1a;
  --orange-dark: #d25706;     /* shadow / depth */
  --orange-mid: #ec6d1a;      /* answer tiles */
  --orange-tile-shadow: #b34e0d;
  --orange-pressed: #d25706;

  --navy: #1a2a5e;            /* secondary 30% (selected tile) */
  --navy-dark: #0d1a3a;
  --navy-mid: #2e4080;

  --ink: #1a202c;            /* primary text (per Figma --gray-3m) */
  --toggle-bg: #191919;      /* language pill background */

  --white: #ffffff;          /* neutral 10% */
  --ash: #f2f1ec;
  --pale-orange: #fff5ec;    /* illustration background */

  --success: #22c16b;
  --success-dark: #158a4a;
  --error: #e74c3c;
  --error-dark: #9b2020;

  --disabled-bg: #cccccc;
  --disabled-shadow: #aaaaaa;

  /* ---- Typography ---- */
  --font-display: "Letter Magic", "Nunito", system-ui, sans-serif;
  --font-body: "Andika", "Nunito", system-ui, sans-serif;
  --font-ui: "Nunito", system-ui, sans-serif;

  /* ---- Layout tokens — fixed scale-to-fit stage (390x844, ~19.5:9) ---- */
  --screen-width: 390px;
  --screen-pad: 15px;
  --screen-min-h: 844px;
  --start-gap: 96px;
  --game-gap: 16px;

  --btn-width: 361px;
  --btn-height: 44px;
  --btn-gap: 15px;
  --btn-radius: 100px;

  --tile-size: 176px;
  --tile-radius: 15px;
  --tile-gap: 10px;

  --progress-height: 8px;

  /* ---- Effects ---- */
  --raise: 4px;                                   /* button/tile lift */
  --shadow-primary: 0 4px 0 var(--orange-dark);
  --shadow-tile: 0 4px 0 var(--orange-tile-shadow);
  --shadow-success: 0 4px 0 var(--success-dark);
  --shadow-error: 0 4px 0 var(--error-dark);
  --shadow-navy: 0 4px 0 var(--navy-dark);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}