@layer reset, tokens, base;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, p, ul { margin: 0; }
  button { font: inherit; color: inherit; }
}

@layer tokens {
  :root {
    --ink: #24284a;
    --ink-soft: #6b6f8e;
    --table: #fff4e0;
    --paper: #ffffff;
    --bad: #ff6b6b;
    --low: #ffc23d;
    --confident: #2fc28a;
    --star: #ffcf33;

    --radius: 1.25rem;
    --radius-small: 0.75rem;
    --shadow: 0 0.4rem 0 rgb(36 40 74 / 0.12), 0 1rem 2rem rgb(36 40 74 / 0.12);

    --space-s: 0.5rem;
    --space-m: 1rem;
    --space-l: 2rem;

    --font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;

    --fast: 150ms;
    --slow: 350ms;
    --bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

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

  body {
    min-height: 100dvh;
    background: var(--table);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1.125rem;
    line-height: 1.4;
  }

  button { cursor: pointer; touch-action: manipulation; }

  .session {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    width: min(100%, 30rem);
    min-height: 100dvh;
    margin: 0 auto;
    padding: var(--space-m);
    overflow: hidden;
  }

  .deck-name { font-size: 1.25rem; text-align: center; }

  .progress { color: var(--ink-soft); text-align: center; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  }
}