/* ==========================================================================
   Trái Cây Nối Nối: design tokens
   Primitive names are Vietnamese (no diacritics); semantic names are English.
   Source of truth for the game (index.html) and the design system page.
   ========================================================================== */

:root {
  /* ---------- Primitives: "mực tím" (purple school ink), used instead of black ---------- */
  --muc-tim-950: #1E0F2E;
  --muc-tim-900: #2A1640;
  --muc-tim-800: #3A1F5D;
  --muc-tim-600: #5B3F86;
  --muc-tim-400: #8F7BB3;
  --muc-tim-200: #D8CFE8;
  --muc-tim-100: #EEE9F6;

  /* "lá chuối": banana leaf green, the primary action color */
  --la-chuoi-800: #17703B;
  --la-chuoi-700: #1E8A4A;
  --la-chuoi-500: #2FB463;
  --la-chuoi-400: #4FCB7C;
  --la-chuoi-200: #BDF0CC;

  /* "vàng xoài": mango yellow, highlights, stars, selection */
  --vang-xoai-700: #D07A06;
  --vang-xoai-600: #F29A0E;
  --vang-xoai-500: #FFC52E;
  --vang-xoai-300: #FFE08A;
  --vang-xoai-100: #FFF5D1;

  /* "hồng thanh long": dragon-fruit pink, brand accent, combos, badges */
  --hong-thanh-long-700: #B0174F;
  --hong-thanh-long-600: #D1205F;
  --hong-thanh-long-500: #F23D7F;
  --hong-thanh-long-300: #FF8DB6;
  --hong-thanh-long-100: #FFE3EE;

  /* "ngọc gạch bông": jade of Vietnamese cement tiles, tile body, info, timer */
  --ngoc-gach-bong-800: #0B5753;
  --ngoc-gach-bong-700: #0F6E6B;
  --ngoc-gach-bong-500: #18A3A0;
  --ngoc-gach-bong-300: #7FD6CF;
  --ngoc-gach-bong-100: #DDF4F0;

  /* "sữa dừa": coconut-milk ivory, tile faces, cards */
  --sua-dua-50: #FFFDF7;
  --sua-dua-100: #FFF6E3;
  --sua-dua-200: #F6E7C8;

  /* "nâu tre": bamboo of the cages ("lồng tre"); ui-art.js draws the cage with exactly these */
  --nau-tre-300: #F6DB9C;
  --nau-tre-500: #E0B266;
  --nau-tre-700: #B8823A;
  --nau-tre-900: #7D5320;

  /* "đỏ đèn lồng": lantern red, danger, time running out */
  --do-den-long-600: #C9302A;
  --do-den-long-500: #E8473C;
  --do-den-long-100: #FFE1DC;

  /* "xanh trà đá": iced-tea ice blue, freeze power-up */
  --tra-da-500: #47B8F0;
  --tra-da-100: #DDF3FF;

  /* ---------- Semantic colors ---------- */
  --color-ink: var(--muc-tim-800);
  --color-ink-soft: var(--muc-tim-600);
  --color-ink-muted: var(--muc-tim-400);
  --color-on-dark: #FFFFFF;
  --color-surface: var(--sua-dua-50);
  --color-surface-raised: #FFFFFF;
  --color-surface-sunken: var(--sua-dua-100);
  --color-line: var(--muc-tim-200);
  --color-primary: var(--la-chuoi-500);
  --color-primary-edge: var(--la-chuoi-800);
  --color-secondary: var(--vang-xoai-500);
  --color-secondary-edge: var(--vang-xoai-700);
  --color-accent: var(--hong-thanh-long-500);
  --color-accent-edge: var(--hong-thanh-long-700);
  --color-info: var(--ngoc-gach-bong-500);
  --color-danger: var(--do-den-long-500);
  --color-star: var(--vang-xoai-500);
  --color-backdrop: rgb(30 15 46 / 0.58);

  /* Tile: ivory face plus jade edge (a nod to mahjong tiles) */
  --tile-face: var(--sua-dua-50);
  --tile-face-2: #FFF8EA;
  --tile-edge: #2E9C8F;
  --tile-edge-dark: #1F7A70;
  --tile-motif: #D3EEE6;
  --tile-selected-face: #FFF1BF;
  --tile-selected-ring: var(--vang-xoai-500);
  --tile-hint-ring: var(--ngoc-gach-bong-500);
  --tile-error-ring: var(--do-den-long-500);

  /* ---------- Typography ---------- */
  --font-display: "Coiny", "Baloo 2", ui-rounded, system-ui, sans-serif;
  --font-ui: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Scale: major third (1.25) from a 16px base */
  --text-xs: 0.75rem;   /* 12 */
  --text-sm: 0.875rem;  /* 14 */
  --text-md: 1rem;      /* 16 */
  --text-lg: 1.25rem;   /* 20 */
  --text-xl: 1.5625rem; /* 25 */
  --text-2xl: 1.953rem; /* 31 */
  --text-3xl: 2.441rem; /* 39 */
  --text-4xl: 3.052rem; /* 49 */
  --text-hero: clamp(3.2rem, 11vw, 6.4rem);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.55;

  /* ---------- Spacing: 4px grid ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;

  /* ---------- Radius ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-tile: 22%;

  /* ---------- Elevation: "3D block" shadows, tinted with ink, never grey ---------- */
  --shadow-soft: 0 6px 16px -6px rgb(42 22 64 / 0.28);
  --shadow-float: 0 18px 40px -14px rgb(42 22 64 / 0.45);
  --shadow-modal: 0 30px 70px -20px rgb(30 15 46 / 0.6);
  --block-depth: 5px;
  --block-depth-pressed: 1px;

  /* ---------- Motion ---------- */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --dur-celebrate: 900ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);

  /* ---------- Layers ---------- */
  --z-scene: 0;
  --z-board: 10;
  --z-links: 20;
  --z-hud: 30;
  --z-fx: 40;
  --z-toast: 50;
  --z-modal: 60;

  /* ---------- Touch ---------- */
  --tap-min: 44px;
}

/* ---------- Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--ngoc-gach-bong-100);
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--hong-thanh-long-500);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-celebrate: 1ms;
  }
}