/* ===== tokens.css (the line's names, this product's values). Component CSS below uses only
   these tokens; the implementer lifts this block into tokens.css unchanged. Values are the
   side panel's: white paper, warm light deck field, amber accent, deep blue second colour,
   cool dark ink. No black, no brown: amber never darkens on press, it takes an inset ring. ===== */
:root {
  color-scheme: light;
  --background: #ffffff;
  --foreground: #1f2328;          /* the family's cool dark ink */
  --card: #f8f5ef;                /* warm light field: the deck header */
  --card-foreground: #1f2328;
  --paper: #ffffff;               /* the index card face */
  --muted: #efeae2;               /* quiet fills, hover */
  --muted-foreground: #59616b;
  --rule: #efeae2;                /* the card's faint horizontal ruling */
  --border: #e8e2d9;              /* hairlines, and the progress remainder */
  --primary: #d97706;             /* amber: top rule, learning, the recommended grade */
  --primary-ink: #1f2328;         /* cool dark ink that rides on amber */
  --secondary: #1d4ed8;           /* deep blue: known */
  --secondary-soft: #e3eafc;
  --secondary-ink: #17306e;       /* ink tinted from the blue, for the blue wash */
  --ring: #1d4ed8;
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-word: 28px;
  --text-due: 22px;
  --text-meaning: 16px;
  --text-base: 14px;
  --text-sm: 13px;
  --text-xs: 12px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --target-min: 44px;
  --mark: 20px;
  --icon: 20px;
  --icon-glyph: 16px;
  --top-rule: 2px;
  --progress-h: 6px;
  --rule-step: 24px;              /* one ruled line; the meaning's line-height rides on it */
  --fold-h: 48px;                 /* two ruled lines, so the answer starts on a rule */
  --card-body-min: 172px;
  --grade-h: 56px;
  --stub-h: 30px;
  --stub-overlap: 8px;
  --slot-min: 200px;
  --field-min: 168px;
  --btn-h: 44px;
  --lift: 6px;                    /* how far the fold lifts on reveal */
  --deal: 10px;                   /* how far the next card rises from the deck */
  --slide: 120px;                 /* how far a graded card leaves the stage */
  --duration-fast: 120ms;
  --duration-reveal: 200ms;
  --duration-grade: 240ms;
  --duration-max: 300ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --shadow: 0 6px 18px -8px rgb(31 35 40 / .22);
  --shadow-raised: 0 1px 2px rgb(31 35 40 / .12);
  --press-ring: inset 0 0 0 2px var(--primary-ink);
}

:where(input, select, textarea, button, [tabindex]):focus-visible {
  outline: var(--outline-width, 2px) solid var(--ring, currentColor);
  outline-offset: calc(-1 * var(--border-width, 1px));
}
:where(input, select, textarea)[aria-invalid='true']:focus-visible {
  outline-color: var(--destructive, currentColor);
}

/* Used only when the product tokens.css has no prefers-color-scheme block. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #14171b;
    --foreground: #e6e9ee;
    --card: #1c2027;
    --card-foreground: #e6e9ee;
    --muted: #262b33;
    --muted-foreground: #9aa3ae;
    --border: #333a44;
    --primary-foreground: #0a1b33;
  }
}