/* =========================================================
   Design tokens — พอร์ตจาก Design_structure/design_handoff_weather_app/tokens (26 ก.ย. 2569)
   ค่าตรงตามดีไซน์ทุกตัว ยกเว้นที่ติด [AA] — ปรับให้ตัวอักษรผ่าน WCAG AA 4.5:1 ตามกฎโปรเจกต์
   (ปรับเข้มขึ้นน้อยที่สุดที่ผ่าน · ค่าเดิมเขียนไว้ในคอมเมนต์)
   ========================================================= */
:root {
  /* palette */
  --teal-100: #dcf3ef; --teal-200: #b3e6de; --teal-300: #72d0c3; --teal-400: #2fb7a8;
  --teal-500: #129c93; --teal-600: #0c7f78; --teal-700: #0a5f5b;
  --coral-200: #ffdcd3; --coral-300: #ff9f8c; --coral-500: #f2634c;
  --amber-200: #fbecc6; --amber-300: #f7cf6a; --amber-500: #e9a520;
  --water-100: #dff1fb; --water-300: #8ccdee; --water-500: #2a93d0; --water-700: #1a6a9e;
  --deep-950: #0a171c; --deep-900: #0f2127; --deep-850: #132930; --deep-800: #19343c;
  --deep-700: #22444d; --deep-500: #3f6770; --deep-300: #8fb0b4; --deep-200: #c3d8d9;
  --paper-0: #ffffff; --paper-50: #faf9f5; --paper-100: #f3f1ea; --paper-200: #e5e2d8; --paper-300: #d0ccbf;
  --ink-900: #13232a; --ink-700: #33464c; --ink-500: #677a7e; --ink-400: #8e9c9e;
  --aqi-good: #2aa86a; --aqi-moderate: #c9a90e; --aqi-poor: #e2672a; --aqi-severe: #c8374f;

  /* fills — แบนสีเดียว ยกเว้นน้ำที่มีไล่ความลึก */
  --fill-primary: #0f847c;          /* [AA] เดิม teal-500 #129c93 — ตัวขาวบนนั้นได้ 3.39 → 4.55 */
  --fill-primary-strip: var(--teal-700); /* แถบล่างการ์ดหลัก — เดิม teal-600 ซึ่งเกือบเท่าสีบนที่ปรับแล้ว */
  --fill-coral: var(--coral-500);   /* ตัวอักษรบน coral ใช้สีหมึก (5.12) แทนสีขาว (3.15) [AA] */
  --fill-amber: var(--amber-300);
  --grad-water: linear-gradient(180deg, #72d0c3 0%, #2a93d0 100%);

  /* type — Sora/Manrope ไม่มีอักษรไทย → ต่อท้าย Sarabun ให้เบราว์เซอร์ใช้กับตัวไทย */
  --font-sans: "Manrope", "Sarabun", "Segoe UI", system-ui, sans-serif;
  --font-display: "Sora", "Sarabun", "Manrope", system-ui, sans-serif;
  --fs-hero: 88px; --fs-display: 56px; --fs-h1: 30px; --fs-temp-md: 36px; --fs-h2: 22px;
  --fs-h3: 17px; --fs-body: 15px; --fs-sm: 13px; --fs-xs: 12px;
  --ls-display: -0.035em;

  /* spacing / radii */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px;
  --r-xs: 4px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;
  --rail-width: 60px; --aside-width: 400px;

  /* effects */
  --shadow-card: 0 1px 2px rgba(19,35,42,0.04);
  --shadow-float: 0 12px 28px -10px rgba(12,127,120,0.45);
  --shadow-coral: 0 12px 28px -10px rgba(242,99,76,0.5);
  --shadow-amber: 0 12px 28px -10px rgba(233,165,32,0.5);
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms;
}

/* ---------- semantic: light (ค่าเริ่มต้น) ---------- */
:root {
  color-scheme: light;
  --bg-app: var(--paper-100); --bg-main: var(--paper-100); --bg-aside: var(--paper-50);
  --surface-card: var(--paper-0); --surface-inset: var(--paper-100); --surface-field: var(--paper-0); --surface-hover: var(--paper-100);
  --text-1: var(--ink-900); --text-2: var(--ink-700);
  --text-3: #5f7175;                /* [AA] เดิม ink-500 #677a7e — บนพื้น paper-100 ได้ 3.99 → 4.53 */
  --text-accent: var(--teal-600); --text-on-color: #ffffff; --text-on-amber: var(--ink-900);
  --accent: var(--fill-primary); --accent-soft: var(--teal-100);
  --border-subtle: var(--paper-200);
  --chart-track: var(--paper-100); --chart-rain: var(--teal-400); --chart-sun: var(--amber-300);
  --sun-glyph: var(--amber-500);
  --heat-0: var(--paper-100); --heat-1: #cdebe5; --heat-2: #8fd6ca; --heat-3: #2fb7a8; --heat-4: #0a5f5b;

  /* สถานะ (ป้าย/ตาราง/กราฟ ใช้ชุดเดียวกัน) — ok=ปกติ · mid=เฝ้าระวัง · bad=วิกฤต/อันตราย */
  --okbg: #e3f4ea;  --ok: #1c7c4d;   /* [AA] เดิม #1f8653 (4.0) */
  --modbg: #f7f0d2; --mod: #806b07;  /* [AA] เดิม #8c7508 (3.94) */
  --midbg: #fbe6da; --mid: #b14917;  /* [AA] เดิม #b94d18 (4.21) — ดีไซน์ใช้ poor เป็น Warning ของระดับน้ำ */
  --badbg: #f8e0e4; --bad: #bc334a;  /* [AA] เดิม #c8374f (4.08) */
  /* เส้นเกณฑ์ในกราฟใช้สีดีไซน์ · ป้ายตัวหนังสือของเส้นใช้สีเข้มที่อ่านออก (amber-500 บนขาวได้แค่ 2.13) */
  --line-warn: var(--amber-500); --line-crit: var(--coral-500);
  --text-warn: #8a5f07; --text-crit: #b23f2c;

  /* ความหมายของสีในแอปนี้ */
  --rain: var(--chart-rain);   /* ฝน */
  --water: var(--water-500);   /* ระดับน้ำ */
  --water-fill: rgba(42,147,208,.30);
  --cmp1: #d0692a; --cmp2: #7a55b8; --cmp3: var(--ink-700); /* ปีที่เทียบ/สถานีอื่น */
}

/* ---------- semantic: dark ---------- */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-app: var(--deep-950); --bg-main: var(--deep-900); --bg-aside: var(--deep-950);
  --surface-card: var(--deep-850); --surface-inset: var(--deep-800); --surface-field: var(--deep-850); --surface-hover: var(--deep-800);
  --text-1: #f2f6f5; --text-2: var(--deep-200); --text-3: var(--deep-300);
  --text-accent: var(--teal-300);
  --accent: var(--teal-400); --accent-soft: rgba(47,183,168,0.16);
  --border-subtle: rgba(255,255,255,0.08);
  --chart-track: var(--deep-800);
  --sun-glyph: var(--amber-300);
  --heat-0: var(--deep-800); --heat-1: #1d4a4d; --heat-2: #1f6e6a; --heat-3: #2fb7a8; --heat-4: #9be3d8;
  --okbg: rgba(42,168,106,.18); --ok: #6fd9a2;
  --modbg: rgba(201,169,14,.18); --mod: #ecd05a;
  --midbg: rgba(226,103,42,.2);  --mid: #f59a6c;
  --badbg: rgba(200,55,79,.22);  --bad: #f0879a;
  --text-warn: var(--amber-300); --text-crit: var(--coral-300);
  --water: var(--water-300); --water-fill: rgba(140,205,238,.25);
  --cmp1: #f39a5b; --cmp2: #b797f0; --cmp3: var(--deep-200);
  --shadow-card: none;
}