/* ฟอนต์ self-host — สร้างด้วย `npm run fonts` (node scripts/fetch-fonts.js)
   ถ้ายังไม่ได้รัน ไฟล์นี้จะไม่มี เบราว์เซอร์ข้ามไปเองแล้ว fallback เป็นฟอนต์ระบบ
   ต้องอยู่บนสุดของไฟล์ — @import ที่ไม่ได้อยู่ก่อนทุก rule จะถูกเมิน */
@import url('../fonts/fonts.css');

/* ============================================================
   TierTalk — Design Tokens
   ธีม: ขาว–แดง (สีประจำวัฒนาวิทยาลัย) + สไตล์น่ารัก soft clay
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  --wwa-red: #c8102e;
  --wwa-red-deep: #9b0c23;
  --wwa-red-soft: #ff5a70;
  --wwa-pink: #ffb3c1;
  --wwa-pink-soft: #ffe4e9;
  --wwa-pink-mist: #fff1f4;
  --wwa-cream: #fff7f8;
  --wwa-white: #ffffff;
  --wwa-ink: #3d2129;
  --wwa-ink-mid: #6b4650;
  --wwa-ink-soft: #7a5b63;
  --wwa-gold: #f2b705;
  --wwa-mint: #076553;

  /* ---------- Semantic ---------- */
  --color-primary: var(--wwa-red);
  --color-primary-hover: var(--wwa-red-deep);
  --color-on-primary: #ffffff;
  --color-accent: var(--wwa-pink);
  --color-background: var(--wwa-cream);
  --color-surface: var(--wwa-white);
  --color-surface-2: var(--wwa-pink-mist);
  --color-surface-3: var(--wwa-pink-soft);
  --color-foreground: var(--wwa-ink);
  --color-muted-fg: var(--wwa-ink-soft);
  --color-border: #f3d5dc;
  --color-border-strong: #e8b9c4;
  --color-ring: var(--wwa-red-soft);
  --color-success: #076553;
  --color-warning: #d98704;
  --color-danger: #c8102e;

  /* พื้น/ขอบของสถานะ — แยกออกมาเป็น token เพื่อไม่ให้ components.css ต้องฝังเลขสีเอง */
  --color-success-bg: #d7f2ea;
  --color-warning-fg: #8a6100;
  --color-warning-bg: #fdf0d0;
  --color-danger-bg: #ffeef1;
  --color-danger-border: #f0a9b5;
  --color-invalid-bg: #fff6f7;
  --color-pink-border: #f090a3;
  --color-pink-hover: #ffa2b4;

  /* ---------- Radius ---------- */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-full: 999px;

  /* ---------- Elevation (clay) ---------- */
  --shadow-flat: 0 1px 2px rgba(200, 16, 46, 0.06);
  --shadow-soft: 0 4px 16px rgba(200, 16, 46, 0.1);
  --shadow-clay: 0 5px 0 rgba(200, 16, 46, 0.14), 0 12px 24px rgba(200, 16, 46, 0.12);
  --shadow-clay-press: 0 2px 0 rgba(200, 16, 46, 0.16), 0 5px 12px rgba(200, 16, 46, 0.1);
  --shadow-lift: 0 14px 34px rgba(200, 16, 46, 0.2);
  --shadow-inner: inset 0 2px 6px rgba(200, 16, 46, 0.08);

  /* ---------- Spacing (4/8 rhythm) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- Type ---------- */
  --font-display: 'Mali', 'Noto Sans Thai', -apple-system,
    BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Helvetica Neue', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 4rem;

  --leading-tight: 1.25;
  --leading-normal: 1.55;
  --leading-loose: 1.75;

  /* ---------- Motion ---------- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --dur-fast: 140ms;
  --dur: 200ms;
  --dur-slow: 320ms;

  /* ---------- Layers ---------- */
  --z-base: 0;
  --z-sticky: 20;
  --z-overlay: 40;
  --z-modal: 100;
  --z-toast: 200;
  --z-fx: 300;
}

/* จอโปรเจกเตอร์: ขยายทุกอย่างให้คนหลังห้องอ่านออก */
.stage-root {
  --text-xs: 1rem;
  --text-sm: 1.15rem;
  --text-base: 1.35rem;
  --text-lg: 1.6rem;
  --text-xl: 2rem;
  --text-2xl: 2.75rem;
  --text-3xl: 3.75rem;
  --text-4xl: 5rem;
  --text-5xl: 7rem;
  /* บนโปรเจกเตอร์สีจะซีดลง → ใช้ตัวอักษรเข้มขึ้น */
  --color-muted-fg: var(--wwa-ink-mid);
  --color-border: #ecc3cd;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}