/* ==========================================================================
   tokens.css — Design tokens
   Source of truth: bandekpleum production screenshot (purple playful mood)
   Note: overrides the earlier cream-orange palette in DESIGN.md, per owner
   decision to match the real bandekpleum brand.
   ========================================================================== */

:root {
  /* ---- Color (purple playful brand) ---- */
  --color-page: #fbf7ff;          /* very pale lavender */
  --color-surface: #ffffff;
  --color-surface-soft: #f3ecfb;  /* light purple wash */
  --color-ink: #3a2a4a;           /* deep plum text */
  --color-muted: #8a7ca0;
  --color-border: #e4d8f2;

  /* brand */
  --color-brand: #7e57c2;         /* primary purple (matches reference) */
  --color-brand-strong: #5e35b1;
  --color-brand-light: #b39ddb;

  /* CTA / accents (reference uses a vivid red submit button) */
  --color-cta: #e53935;
  --color-cta-strong: #c62828;

  /* playful pastels for charts/states */
  --color-pink: #f48fb1;
  --color-yellow: #ffd54f;
  --color-mint: #81d4b8;
  --color-sky: #7fb8e8;

  --color-success-bg: #e6f7ee;
  --color-success-text: #1f8a52;
  --color-warning-bg: #fff5db;
  --color-warning-text: #9a6b00;
  --color-danger-bg: #fdeceb;
  --color-danger-text: #c62828;

  /* ---- Typography ---- */
  --font-body: "Noto Sans Thai", "Sarabun", "Leelawadee UI", system-ui, -apple-system, sans-serif;
  --font-display: "Noto Sans Thai", "Sarabun", "Leelawadee UI", system-ui, -apple-system, sans-serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-score: 56px; /* mobile; desktop overridden in media query */

  /* ---- Spacing ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ---- Shape & Elevation (playful = rounder, softer) ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-soft: 0 14px 30px rgba(94, 53, 177, 0.14);
  --shadow-card: 0 6px 18px rgba(94, 53, 177, 0.08);
  --shadow-focus: 0 0 0 3px rgba(126, 87, 194, 0.30);

  /* ---- Layout ---- */
  --maxw-student: 960px;
  --maxw-teacher: 1200px;

  /* solid brand background for hero bands */
  --color-hero-bg: #7e57c2;
}

@media (min-width: 768px) {
  :root { --text-score: 72px; }
}