/* Design tokens from design/design-system/project/tokens.json ("Velvet Fluff", BT-D-009; values as in
   design/skins/velvet-fluff-APPLY.md). Shared by the website and the admin. Do not add colours or
   sizes that are not in tokens.json. */
:root {
  --ground: #FBEFEF; --surface: #FFF9F5; --surface-sunken: #F3DEE1; --ink: #3B1232; --ink-muted: #7A4766;
  --on-color: #3B1232; --hairline: #E6C7CF; --brand: #EE7F9B; --brand-text: #A8335D; --sun: #F0C46A;
  --correct: #6CCCC2; --correct-text: #0F6B66; --wrong: #F5A57F; --wrong-text: #9A4420; --focus: #2F5BD8;
  --player-1: #F59DB4; --player-2: #F3CF7E; --player-3: #88D4CB; --player-4: #C6A9F2;
  --player-5: #F8AF8D; --player-6: #A9BCF7; --player-7: #E9B5DA; --player-8: #D9C3A3;
  --shadow-sticker: 0px 6px 14px #DDA6B8; --shadow-sticker-pressed: 0px 2px 6px #DDA6B8;
  --shadow-sheet: 0 18px 48px rgba(91,22,64,0.20);
  --display: "Nunito", "Baloo Bhaijaan 2", system-ui, sans-serif;
  --display-ar: "Baloo Bhaijaan 2", "Nunito", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-sm: 14px; --radius-md: 24px; --radius-lg: 34px; --radius-pill: 999px;
  --stroke-sticker: 2px; --stroke-focus: 3px;
  --duration-tap: 140ms; --duration-quick: 220ms; --duration-move: 360ms;
  --duration-reveal: 650ms; --duration-celebrate: 1600ms;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #1C0A18; --surface: #2D1428; --surface-sunken: #13060F; --ink: #FCEFEF; --ink-muted: #D1A9BF;
    --hairline: #4C2A44; --brand: #F28DA8; --brand-text: #F7A9BE; --sun: #F3CD79;
    --correct: #72D4C9; --correct-text: #8FE3D9; --wrong: #F8AF8C; --wrong-text: #FBBE9F; --focus: #8DB3FF;
    --shadow-sticker: 0px 6px 16px #0A0309; --shadow-sticker-pressed: 0px 2px 6px #0A0309;
    --shadow-sheet: 0 18px 48px rgba(0,0,0,0.60);
    color-scheme: dark;
  }
}
/* Type styles (tokens.json › type) */
.t-display-xl { font: 900 44px/48px var(--display); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.t-score { font: 900 34px/36px var(--display); font-variant-numeric: tabular-nums; }
.t-title-lg { font: 800 28px/34px var(--display); }
.t-title-md { font: 800 20px/26px var(--display); }
.t-question { font: 600 22px/29px var(--body); }
.t-answer { font: 600 18px/24px var(--body); }
.t-body { font: 400 17px/24px var(--body); }
.t-callout { font: 500 15px/20px var(--body); }
.t-caption { font: 500 13px/18px var(--body); }
.t-label { font: 700 12px/16px var(--body); letter-spacing: .08em; text-transform: uppercase; }
:lang(ar) .t-label, :lang(tr) .t-label { text-transform: none; letter-spacing: 0; }
:focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 3px; }