/* =============================================================
   Jamsai Design System — Core Tokens
   Brand: Jamsai Publishing (บริษัท แจ่มใส พับลิชชิ่ง จำกัด)
   Source: Jamsai Logo Usage Guideline, July 2022
   ============================================================= */

:root {
  /* ---------- BRAND COLORS ---------- */
  --jamsai-orange:        #F66000;
  --jamsai-orange-rgb:    246, 96, 0;
  --jamsai-orange-cmyk:   0, 76, 100, 0;

  --jamsai-white:         #FFFFFF;
  --jamsai-black:         #000000;

  /* ---------- EXTENDED ORANGE SCALE ---------- */
  --orange-50:   #FFF3EB;
  --orange-100:  #FFE0CC;
  --orange-200:  #FFC199;
  --orange-300:  #FF9C5C;
  --orange-400:  #FD7B2A;
  --orange-500:  #F66000;
  --orange-600:  #D85200;
  --orange-700:  #B24300;
  --orange-800:  #7F3000;
  --orange-900:  #4D1D00;

  /* ---------- VIBRANT SUPPORTING PALETTE ---------- */
  --vibrant-magenta:   #E5007E;
  --vibrant-fuchsia:   #D01F7C;
  --vibrant-crimson:   #E02028;
  --vibrant-amber:     #F9B000;
  --vibrant-lime:      #A8C800;
  --vibrant-teal:      #009BA4;
  --vibrant-cobalt:    #0057A8;
  --vibrant-violet:    #6A2E86;

  /* ---------- SOFT SUPPORTING PALETTE ---------- */
  --soft-peach:        #FCD8BC;
  --soft-blush:        #F8C7C8;
  --soft-rose:         #F4B0C6;
  --soft-cream:        #FCEBCF;
  --soft-butter:       #FAE9A8;
  --soft-mint:         #CFE4C3;
  --soft-sky:          #BFD9EA;
  --soft-lavender:     #D6CBE2;

  /* ---------- FUNCTIONAL NEUTRALS ---------- */
  --ink-900:   #1A120C;
  --ink-700:   #3D2F24;
  --ink-500:   #6E5B4D;
  --ink-300:   #A8988B;
  --ink-200:   #D4C9BE;
  --ink-100:   #EDE6DE;
  --ink-50:    #F7F3EE;
  --paper:     #FAF6F0;
  --surface:   #FFFFFF;

  /* ---------- ACTION ---------- */
  /* Brand orange #F66000 with white text is only 3.2:1 — fails WCAG AA for
     button/label text. --action is a deeper orange (≈5:1 on white) used on
     text-bearing controls (buttons, active nav). The bright --jamsai-orange
     stays for large fills, the progress ring, focus, and graphic accents. */
  --action:        #C24600;
  --action-hover:  #A83D00;

  /* ---------- SEMANTIC ---------- */
  --success:   #2F8F4E;
  --warning:   #E59400;
  /* --warning is only ~2:1 as text on the soft-butter "pending" chip. Use
     --warning-ink for pending text / white-on-amber so it clears WCAG AA. */
  --warning-ink:  #8A5300;
  --danger:    #C72F2F;
  --info:      #2C6FB3;

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans:    "IBM Plex Sans Thai Looped", "IBM Plex Sans",
                  -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "Noto Sans Thai", "Helvetica Neue", Arial, sans-serif;

  --font-display: "IBM Plex Sans Thai", "IBM Plex Sans",
                  "Noto Sans Thai", sans-serif;

  --font-serif:   "IBM Plex Serif", "Sarabun", Georgia,
                  "Times New Roman", serif;

  --font-mono:    "IBM Plex Mono", "SF Mono", Menlo,
                  Consolas, monospace;

  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   60px;
  --fs-6xl:   76px;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.55;
  --lh-loose: 1.75;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- SPACING (4pt grid) ---------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ---------- RADII ---------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-full: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(26, 18, 12, 0.06);
  --shadow-sm: 0 2px 6px rgba(26, 18, 12, 0.08);
  --shadow-md: 0 6px 16px rgba(26, 18, 12, 0.10);
  --shadow-lg: 0 16px 40px rgba(26, 18, 12, 0.14);
  --shadow-orange: 0 10px 28px rgba(246, 96, 0, 0.28);

  /* ---------- MOTION ---------- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ---------- GOOGLE FONT IMPORT ---------- */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai+Looped:wght@400;500;600;700&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---------- BASE ---------- */
html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--jamsai-orange); color: #fff; }