/*
 * Base design tokens (oklch custom properties).
 *
 * Source of truth for the hex values below is DESIGN.md's `colors` block
 * (ux-designs/ux-dsx-generator-2026-08-11/DESIGN.md) — that file stays hex
 * per its own spec; this stylesheet expresses the same palette in oklch,
 * per the architecture's token-pattern (ARCHITECTURE.md §4 Stack: "borrows
 * only the CSS-custom-property/oklch token pattern"). The mapping is 1:1;
 * oklch is only the storage format, not a different palette.
 *
 * spec-1-1-school-account-login.md's login screen only needs the four
 * tokens below. Later stories add the rest of DESIGN.md's palette
 * (flag, flag-bg, success, success-bg) as those screens are built — do
 * not add them here speculatively.
 *
 * spec-2-2-hoop-size-selection.md's Hoop Selection screen is the first
 * to need `--color-border` (DESIGN.md's hoop-card component: hairline
 * border; its "white background" is `--color-background`, already
 * present) — added below.
 *
 * spec-2-6-authoritative-preview-render.md's Preview screen is the first
 * to need `flag`/`flag-bg` (the highlight-stroke colour and the
 * flag-item component) and `success`/`success-bg` (the success-banner
 * component, zero-flags case) — added below, same 1:1 hex-to-oklch
 * mapping as every other token here.
 */
:root {
  --color-background: oklch(100% 0 0);          /* #FFFFFF */
  --color-primary: oklch(47.37% 0.1693 257.17); /* #0057B8 */
  --color-primary-foreground: oklch(100% 0 0);  /* #FFFFFF */
  --color-text: oklch(14.48% 0 0);              /* #0A0A0A */
  --color-border: oklch(90.53% 0.0052 247.88);  /* #DDE0E3 */
  --color-flag: oklch(47.72% 0.1129 59.10);     /* #8A4A00 */
  --color-flag-bg: oklch(94.12% 0.0255 78.92);  /* #F5EAD9 */
  --color-success: oklch(46.60% 0.1125 152.47); /* #146B39 */
  --color-success-bg: oklch(94.75% 0.0198 159.75); /* #E3F2E9 */
}