/* ============================================================
   เลขากอง (LekhaKong) — Design System Tokens (production build)
   Tourism & Sports Division — Personal Secretary & Division
   Management web app (mobile-first, LINE LIFF).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700&family=Sarabun:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Teal · ทะเล · primary brand ------------------------ */
  --teal-50:  #ECFCFD;
  --teal-100: #CFF6F9;
  --teal-200: #A0EBF0;
  --teal-300: #66D8E1;
  --teal-400: #2FBCC9;
  --teal-500: #149DAC;
  --teal-600: #0E7C8B;
  --teal-700: #11626E;
  --teal-800: #134F58;
  --teal-900: #14424A;
  --teal-950: #062A30;

  /* ---- Gold · แดด · tourism accent ------------------------ */
  --gold-50:  #FFF8E8;
  --gold-100: #FDEDC2;
  --gold-200: #FBDC84;
  --gold-300: #F8C846;
  --gold-400: #F2AE1C;
  --gold-500: #E29A12;
  --gold-600: #C07A0C;
  --gold-700: #99590E;
  --gold-800: #7E4612;
  --gold-900: #6B3A13;
  --gold-950: #3E1D06;

  /* ---- Coral · สนาม · sports accent ----------------------- */
  --coral-50:  #FFF2EE;
  --coral-100: #FFE0D7;
  --coral-200: #FFC2B0;
  --coral-300: #FF9A7E;
  --coral-400: #FA6E4A;
  --coral-500: #EF5630;
  --coral-600: #D43F1C;
  --coral-700: #A82F18;
  --coral-800: #862815;
  --coral-900: #6E2415;
  --coral-950: #3C0E07;

  /* ---- Neutral · cool slate ------------------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F9FA;
  --neutral-100: #EEF1F4;
  --neutral-200: #E1E6EA;
  --neutral-300: #CBD3DA;
  --neutral-400: #9AA7B1;
  --neutral-500: #6B7884;
  --neutral-600: #4E5A65;
  --neutral-700: #3A444E;
  --neutral-800: #28303A;
  --neutral-900: #1A2129;
  --neutral-950: #0E141A;

  /* ---- Semantic ------------------------------------------- */
  --green-50:#ECFDF3;--green-100:#D1FADF;--green-500:#16A34A;--green-600:#15803D;--green-700:#166534;
  --red-50:#FEF2F2;--red-100:#FEE2E2;--red-500:#DC2626;--red-600:#B91C1C;--red-700:#991B1B;
  --amber-50:#FFFBEB;--amber-100:#FEF3C7;--amber-500:#E29A12;--amber-600:#C07A0C;

  --line-green:#06C755;--line-green-press:#05A647;

  --color-primary: var(--teal-600);
  --color-primary-hover: var(--teal-700);
  --color-primary-press: var(--teal-800);
  --color-primary-subtle: var(--teal-50);
  --color-on-primary: #FFFFFF;
  --color-tourism: var(--gold-500);
  --color-sports: var(--coral-500);

  --text-strong: var(--neutral-900);
  --text-body:   var(--neutral-700);
  --text-muted:  var(--neutral-500);
  --text-subtle: var(--neutral-400);
  --text-on-brand: #FFFFFF;
  --text-link:   var(--teal-600);

  --surface-page: var(--neutral-50);
  --surface-card: var(--neutral-0);
  --surface-sunken: var(--neutral-100);

  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);

  --status-submitted: var(--green-500);
  --status-submitted-bg: var(--green-50);
  --status-pending: var(--neutral-400);
  --status-pending-bg: var(--neutral-100);

  --color-success: var(--green-500);
  --color-warning: var(--amber-500);
  --color-danger:  var(--red-500);
  --color-info:    var(--teal-600);

  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--teal-500) 35%, transparent);

  /* ---- Typography ----------------------------------------- */
  --font-display: "Kanit", "Sarabun", system-ui, sans-serif;
  --font-sans:    "Sarabun", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", "Sarabun", ui-monospace, monospace;

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

  --fs-display:34px;--fs-h1:26px;--fs-h2:22px;--fs-h3:19px;
  --fs-title:17px;--fs-body:16px;--fs-callout:15px;--fs-label:14px;--fs-caption:13px;--fs-micro:12px;

  --lh-tight:1.18;--lh-snug:1.32;--lh-normal:1.55;--lh-relaxed:1.7;
  --ls-tight:-0.01em;--ls-normal:0;--ls-overline:0.08em;

  /* ---- Spacing -------------------------------------------- */
  --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;
  --gutter:16px;--stack-gap:12px;--inline-gap:8px;
  --tap-min:44px;--control-h:48px;--control-h-sm:40px;--control-h-lg:56px;
  --app-max-w:460px;--tabbar-h:64px;--appbar-h:56px;
  --safe-bottom:env(safe-area-inset-bottom, 0px);
  --safe-top:env(safe-area-inset-top, 0px);

  /* ---- Radii / shadows ------------------------------------ */
  --radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:18px;--radius-xl:24px;--radius-2xl:32px;--radius-pill:999px;

  --shadow-xs:0 1px 2px rgba(20,40,50,.06);
  --shadow-sm:0 1px 3px rgba(20,40,50,.08),0 1px 2px rgba(20,40,50,.04);
  --shadow-md:0 4px 12px rgba(20,40,50,.08),0 2px 4px rgba(20,40,50,.05);
  --shadow-lg:0 12px 28px rgba(20,40,50,.12),0 4px 10px rgba(20,40,50,.06);
  --shadow-xl:0 24px 48px rgba(20,40,50,.18);
  --shadow-brand:0 8px 20px color-mix(in srgb, var(--teal-600) 28%, transparent);
  --shadow-sports:0 8px 20px color-mix(in srgb, var(--coral-500) 30%, transparent);
  --scrim:rgba(14,20,26,.45);

  /* ---- Motion --------------------------------------------- */
  --dur-instant:80ms;--dur-fast:140ms;--dur-normal:220ms;--dur-slow:320ms;
  --ease-standard:cubic-bezier(.2,0,0,1);
  --ease-decel:cubic-bezier(.05,.7,.1,1);
  --ease-spring:cubic-bezier(.34,1.3,.64,1);
  --press-scale:.97;
}

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

/* ---- Base reset ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; -webkit-tap-highlight-color:transparent; }
body {
  margin:0;
  font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-normal);
  font-weight:var(--fw-regular); color:var(--text-body); background:var(--surface-page);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--text-strong); font-weight:var(--fw-semibold); line-height:var(--lh-tight); letter-spacing:var(--ls-tight); margin:0; }
h1 { font-size:var(--fs-h1); } h2 { font-size:var(--fs-h2); } h3 { font-size:var(--fs-h3); }
p { margin:0; }
a { color:var(--text-link); text-decoration:none; }
button { font-family:inherit; font-size:inherit; }
img { max-width:100%; display:block; }
::-webkit-scrollbar { width:0; height:0; }
:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-xs); }