/* StudyDaily design tokens — public site copy.
 *
 * MIRROR, NOT A FORK. Copied verbatim from `design-system/tokens.css` at the
 * repository root, which is itself the mirror of the Flutter app's
 * lib/designsystem/{colors,spacing,typography,elevation}.dart. The three must
 * be edited together; the names are identical on purpose so a diff is obvious.
 *
 * Only the token block is copied. The demo-page rules that follow it upstream
 * (`.mq-card`, `.mq-grid`…) belong to the design-system preview, not here: the
 * site builds its own components in site.css from these same values.
 *
 * The file is served from our own domain. It pulls in nothing: no remote font,
 * no CDN, no imported stylesheet. That is a privacy constraint
 * (`plan-nuit-2/N7.md` step 1), not a preference, and NoThirdPartyTest fails
 * if it is ever relaxed.
 */

:root {
  /* Brand ---------------------------------------------------------------- */
  --mq-seed: #4F46E5;

  /* Grading — FSRS answer buttons */
  --mq-rating-again: #E5484D;
  --mq-rating-hard: #F0800C;
  --mq-rating-good: #2FA96C;
  --mq-rating-easy: #0EA0C2;

  /* Counters */
  --mq-count-new: #6366F1;
  --mq-count-learning: var(--mq-rating-hard);
  --mq-count-review: var(--mq-rating-good);
  --mq-offline: #64748B;

  /* Light scheme — cold paper, near-black ink, pure white for cards */
  --mq-primary: #4F46E5;
  --mq-on-primary: #ffffff;
  --mq-primary-container: #E4E4FB;
  --mq-on-primary-container: #312E81;
  --mq-secondary: #5B6472;
  --mq-tertiary: #0E7490;
  --mq-error: #D92D20;
  --mq-surface: #F6F6FA;
  --mq-on-surface: #1A1A26;
  --mq-on-surface-variant: #5F5F74;
  --mq-outline: #83839C;
  --mq-outline-variant: #E6E6F0;
  --mq-surface-lowest: #ffffff;
  --mq-surface-low: #FBFBFD;
  --mq-surface-container: #EFEFF5;
  --mq-surface-high: #E9E9F1;

  /* Spacing — six values, no more */
  --mq-space-xs: 4px;
  --mq-space-sm: 8px;
  --mq-space-md: 12px;
  --mq-space-lg: 16px;
  --mq-space-xl: 24px;
  --mq-space-xxl: 32px;

  /* Radii */
  --mq-radius-sm: 8px;
  --mq-radius-md: 12px;
  --mq-radius-lg: 16px;
  --mq-radius-xl: 24px;
  --mq-radius-pill: 999px;

  /* Elevation — light theme only; dark uses surface steps instead */
  --mq-elev-1: 0 3px 12px rgba(24, 24, 48, 0.08);
  --mq-elev-2: 0 6px 20px rgba(24, 24, 48, 0.12);
  --mq-elev-3: 0 12px 32px rgba(24, 24, 48, 0.16);

  /* Motion */
  --mq-motion-fast: 120ms;
  --mq-motion-medium: 200ms;
  --mq-motion-slow: 320ms;
  --mq-ease-enter: cubic-bezier(0.215, 0.61, 0.355, 1);

  /* Layout */
  --mq-readable-width: 560px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark scheme — ink night tinted indigo, never Material grey. First class:
     * contrasts are designed, not mechanically inverted. */
    --mq-primary: #A5B4FC;
    --mq-on-primary: #1E1B4B;
    --mq-primary-container: #3B3690;
    --mq-on-primary-container: #E0E7FF;
    --mq-secondary: #A8B1C2;
    --mq-tertiary: #67D3EC;
    --mq-error: #F97066;
    --mq-surface: #121218;
    --mq-on-surface: #E7E7F0;
    --mq-on-surface-variant: #A6A6BC;
    --mq-outline: #70708A;
    --mq-outline-variant: #2A2A38;
    --mq-surface-lowest: #0D0D12;
    --mq-surface-low: #17171F;
    --mq-surface-container: #1C1C26;
    --mq-surface-high: #22222E;

    --mq-elev-1: none;
    --mq-elev-2: none;
    --mq-elev-3: 0 12px 32px rgba(0, 0, 0, 0.4);
  }
}