/*
  Find Filip design tokens. The rules are in DESIGN.md.
  Every size is a step of 4px. Use these tokens. Do not type raw sizes in other files.
*/
:root {
  color-scheme: dark;

  /* ---------- color ---------- */
  --color-bg: #0e0e10;
  --color-surface: #1a1a1e;
  --color-surface-raised: #26262c;
  --color-line: #32323a;
  --color-text: #f5f5f7;
  --color-text-muted: #a1a1aa;
  --color-brand: #fffc00;        /* Snapchat yellow */
  --color-on-brand: #000000;
  --color-white: #ffffff;
  --color-scrim: rgba(0, 0, 0, 0.64);
  --color-easy: #34d399;
  --color-normal: #38bdf8;
  --color-hard: #fb923c;
  --color-impossible: #f43f5e;
  --color-danger: #f43f5e;

  /* ---------- space (4pt steps) ---------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- type ----------
     Text: line height = size + 4pt steps (12/16, 16/24, 20/28, 24/32, 32/40).
     Buttons, chips, tabs: line height = 100%.
     Letter spacing is always 0. */
  --font-sans: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;

  --text-caption: 12px;
  --leading-caption: 16px;
  --text-body: 16px;
  --leading-body: 24px;
  --text-heading: 20px;
  --leading-heading: 28px;
  --text-title: 24px;
  --leading-title: 32px;
  --text-display: 32px;
  --leading-display: 40px;
  --leading-control: 100%;

  --weight-regular: 400;
  --weight-bold: 700;
  --weight-heavy: 800;
  --weight-black: 900;

  /* ---------- sizes ---------- */
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-control-sm: 32px;
  --size-control-md: 40px;
  --size-control-lg: 48px;
  --size-avatar: 48px;

  /* ---------- shape ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 1000px;
  --border-width: 2px;

  /* ---------- depth ---------- */
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.48);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.64);
  --blur-md: 8px;

  /* ---------- motion ---------- */
  --duration-press: 120ms;   /* a button going down */
  --duration-fast: 200ms;    /* fades, closing */
  --duration-base: 400ms;    /* most movement */
  --duration-slow: 800ms;    /* big entrances, flying to Filip */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* fast start, soft stop */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);           /* for things that leave */
  --ease-spring: cubic-bezier(0.32, 1.24, 0.64, 1); /* goes a tiny bit too far (2%), then settles */

  /* ---------- page layout ---------- */
  --page-x: var(--space-4);        /* left and right edge */
  --page-y: var(--space-6);        /* top and bottom edge */
  --section-gap: var(--space-6);   /* between header, game board and footer */
}

@media (width >= 768px) {
  :root {
    --page-x: var(--space-8);
    --page-y: var(--space-8);
    --section-gap: var(--space-8);
  }
}