/* ==========================================================================
   I CAN ECU — Design tokens
   อ้างจาก brand board ทางการ · เหตุผลและกฎการใช้อยู่ใน brand/BRAND.md

   ตัวเลขในคอมเมนต์คือ contrast ratio ตาม WCAG 2.1 เทียบพื้นขาว #FFFFFF
   เกณฑ์: ตัวอักษรปกติต้อง >= 4.5 · ตัวอักษรใหญ่/ตัวหนา >= 3.0 · AAA = 7.0
   ========================================================================== */

:root {
  /* ======================================================================
     1. หกสีทางการจาก brand board — ห้ามแก้ค่าเหล่านี้
     ====================================================================== */
  --official-primary-blue: #0e5bff; /*  5.30 */
  --official-sky-blue: #4da8ff; /*  2.51 — พื้น/ลายเท่านั้น */
  --official-light-blue: #eaf4ff; /*  1.11 — พื้นเท่านั้น */
  --official-white: #ffffff;
  --official-silver: #b8c7d9; /*  1.72 — เส้นขอบเท่านั้น */
  --official-deep-navy: #0b1f44; /* 16.23 */

  /* ======================================================================
     2. สเกลที่ไล่จากสีทางการ (hue และ saturation เดียวกัน ต่างแค่ความสว่าง)
     ====================================================================== */

  /* Blue — hue 220.8° sat 100% · ระดับ 500 คือ PRIMARY BLUE ทางการ */
  --blue-50: #f0f5ff; /*  1.09 */
  --blue-100: #e0eaff; /*  1.21 */
  --blue-200: #bdd2ff; /*  1.52 */
  --blue-300: #8aafff; /*  2.17 */
  --blue-400: #4d86ff; /*  3.40 */
  --blue-500: #0e5bff; /*  5.30 = ทางการ */
  --blue-600: #004beb; /*  6.55 */
  --blue-700: #0044d6; /*  7.51 — ผ่าน AAA */
  --blue-800: #0037ad; /*  9.77 */
  --blue-900: #002a85; /* 12.58 */
  --blue-950: #001a52; /* 16.54 */

  /* Navy — hue 218.9° sat 72% · ระดับ 700 คือ DEEP NAVY ทางการ */
  --navy-400: #184495; /*  9.13 */
  --navy-500: #133677; /* 11.53 */
  --navy-600: #0f2a5c; /* 13.94 */
  --navy-700: #0b1f44; /* 16.23 = ทางการ */
  --navy-800: #081630; /* 17.98 */
  --navy-900: #050f21; /* 19.15 */

  /* Sky — hue 209.3° sat 100% · ระดับ 500 คือ SKY BLUE ทางการ
     ทุกระดับต่ำกว่า 4.5 ห้ามใช้เป็นตัวอักษรบนพื้นขาว ใช้บนพื้น navy ได้ */
  --sky-300: #99cdff; /*  1.68 */
  --sky-400: #6bb7ff; /*  2.13 */
  --sky-500: #4da8ff; /*  2.51 = ทางการ */
  --sky-600: #1a8fff; /*  3.27 */

  /* Steel — hue 212.7° sat 30% · ระดับ 300 คือ SILVER ทางการ */
  --steel-100: #eef2f6; /*  1.12 */
  --steel-200: #dee5ed; /*  1.27 */
  --steel-300: #b9c8da; /*  1.70 = ทางการ */
  --steel-400: #95abc6; /*  2.35 */
  --steel-500: #6a89af; /*  3.61 */

  /* Ink — hue 219° sat 26% · เฉพาะลำดับชั้นตัวอักษร
     brand board ไม่ได้กำหนดสีเทา จึงลด saturation ของ navy ลงให้ยังอยู่ในตระกูลเดียวกัน */
  --ink-600: #48597a; /*  7.03 — ผ่าน AAA */
  --ink-500: #5b719a; /*  4.91 */
  --ink-400: #7e91b4; /*  3.18 — ตัวใหญ่เท่านั้น */

  /* ======================================================================
     3. Semantic — ใช้กลุ่มนี้ในโค้ด ห้ามอ้างสเกลข้างบนตรง ๆ (ดู AGENTS.md)
     ====================================================================== */
  --brand: var(--blue-500); /* ปุ่มหลัก ไอคอน หัวข้อใหญ่ — 5.30 ผ่าน AA */
  --brand-bright: var(--blue-400); /* hover บนพื้นเข้ม */
  --brand-link: var(--blue-700); /* ลิงก์ในเนื้อความและตัวอักษรเล็ก — 7.51 ผ่าน AAA */
  --brand-deep: var(--blue-800); /* สถานะกด */
  --brand-soft: var(--official-light-blue); /* พื้นแท็ก พื้น section อ่อน */
  --brand-tint: var(--blue-100);
  --brand-line: var(--blue-200);
  --brand-on-dark: var(--blue-200); /* ตัวอักษรรองบนพื้น navy — 10.69 */

  --dark: var(--navy-700); /* hero และแถบเข้ม */
  --dark-surface: var(--navy-600); /* การ์ดซ้อนบนพื้นเข้ม */
  --dark-deeper: var(--navy-800); /* footer ชั้นล่างสุด */
  --dark-line: var(--navy-500);

  /* พื้นหน้าใช้เทาเย็นอ่อนแบบ ORI REMAP ไม่ไล่ไปฟ้าอ่อน เพราะฟ้าทั้งหน้าทำให้ดูเลอะ */
  --bg: #f8fafc;
  --surface: var(--official-white);
  --surface-soft: var(--steel-100);

  --text: var(--navy-700); /* 16.23 */
  --text-secondary: var(--ink-600); /*  7.03 */
  --text-tertiary: var(--ink-400); /*  3.18 — meta เท่านั้น */
  --text-on-dark: var(--official-white);

  --border: var(--steel-200);
  --border-strong: var(--steel-300);

  --success: #0f7a3d;
  --danger: #b3261e;

  /* สีเน้น amber — ยังไม่ได้อยู่ในหกสีทางการ แต่ปรากฏใน mockup ที่ป้าย "แนะนำ"
     และดาวรีวิว · รอเจ้าของตัดสินหลังดูภาพเทียบ
     ถ้าตัดออก ให้เปลี่ยน --accent เป็น var(--sky-500) และ --text-on-accent เป็น var(--navy-700) */
  --accent: #fcbf31; /* กับ navy = 9.77 */
  --accent-strong: #efa906;
  --text-on-accent: var(--navy-700);

  /* LINE เป็นสีแบรนด์ภายนอก ใช้ได้เฉพาะปุ่มทัก LINE
     ตัวอักษรบนปุ่มต้องเป็น --text-on-line (7.20) ห้ามใช้สีขาว (2.26) */
  --line-green: #06c755;
  --line-green-dark: #05a948;
  --text-on-line: var(--navy-700);

  /* --- สีประจำซีรีส์หนังสือ ---------------------------------------------
     เคยใช้ม่วงกับส้มเพื่อแยกหมวด แต่เป็น hex ที่ไม่ได้มาจากชุดสีทางการ 6 สี
     จึงตีกับทั้งเว็บที่เป็นน้ำเงิน-navy ล้วน เปลี่ยนมาไล่น้ำหนักในตระกูลเดียวกัน
     แล้วให้ไอคอนกับรูปปกเป็นตัวแยกหมวดแทนสี
     พื้นและเส้นใช้ค่าเดียวกันทุกหมวดโดยเจตนา เก็บตัวแปรแยกไว้เผื่อวันหลังอยากแยกจริง */
  --series-ecu: var(--blue-700); /*  7.51 — ซีรีส์เรือธง */
  --series-ecu-bg: var(--brand-soft);
  --series-ecu-line: var(--brand-line);

  --series-meter: var(--navy-600); /* 13.94 */
  --series-meter-bg: var(--brand-soft);
  --series-meter-line: var(--brand-line);

  --series-canbus: var(--blue-500); /*  5.30 */
  --series-canbus-bg: var(--brand-soft);
  --series-canbus-line: var(--brand-line);

  --series-pinout: var(--ink-600); /*  7.03 */
  --series-pinout-bg: var(--brand-soft);
  --series-pinout-line: var(--brand-line);

  /* ======================================================================
     4. ตัวอักษร
     Montserrat ไม่มีอักษรไทย จึงวางไว้หน้าสุดแล้วให้ไทยตกไปที่ Anuphan หรือ Kanit
     ตามลำดับ ผลคือหัวข้ออังกฤษได้ Montserrat Bold หัวข้อไทยได้ Anuphan Bold
     เนื้อความอังกฤษได้ Montserrat Regular เนื้อความไทยได้ Kanit ตรงตาม brand board
     ====================================================================== */
  --font-display: "Montserrat", "Anuphan", system-ui, sans-serif;
  --font-body: "Montserrat", "Kanit", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  --fs-h1: clamp(2rem, 1.35rem + 2.6vw, 2.85rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-h3: 1.375rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.75rem;

  --lh-heading: 1.3;
  /* Kanit ตัวหนากว่า Sarabun จึงต้องเผื่อระยะบรรทัดมากกว่าปกติ */
  --lh-body: 1.8;
  --ls-heading: -0.01em;
  --fw-body: 400;
  --fw-heading: 700;

  /* --- โครงสร้าง --------------------------------------------------------- */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --max-w: 1200px;
  --nav-h: 72px;
  --section-pad: 88px;
  --section-pad-m: 52px;

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

  --shadow-sm: 0 1px 2px rgb(11 31 68 / 6%);
  --shadow: 0 10px 30px rgb(11 31 68 / 8%);
  --shadow-lg: 0 24px 60px rgb(11 31 68 / 12%);

  /* --- แผ่นกระจกแบบ iOS --------------------------------------------------
     ผสมจากสีทางการเท่านั้น ไม่มี hex ใหม่ ตัวเลขคือสัดส่วนความทึบ
     ต้องมีทั้งชุดบนพื้นสว่างและชุดบนพื้น navy เพราะกระจกยืมสีจากพื้นหลัง
     ตัวอักษรบนกระจกให้ใช้ --text บนพื้นสว่าง และ --text-on-dark บนพื้นเข้ม
     ซึ่งวัด contrast แล้วผ่าน AA ทั้งคู่เพราะความทึบไม่ต่ำกว่า 60% */
  --glass: color-mix(in srgb, var(--official-white) 64%, transparent);
  --glass-strong: color-mix(in srgb, var(--official-white) 82%, transparent);
  --glass-line: color-mix(in srgb, var(--official-white) 70%, transparent);
  --glass-shadow: 0 18px 50px rgb(11 31 68 / 16%);

  --glass-dark: color-mix(in srgb, var(--navy-800) 62%, transparent);
  --glass-dark-strong: color-mix(in srgb, var(--navy-800) 82%, transparent);
  --glass-dark-line: color-mix(in srgb, var(--official-white) 20%, transparent);
  --glass-dark-shadow: 0 22px 60px rgb(5 15 33 / 45%);

  --glass-blur: 20px;
  /* iOS ใช้มุมโค้งใหญ่กว่าการ์ดทั่วไป จึงแยกค่าไว้ไม่ปนกับ --radius-lg */
  --radius-glass: 26px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}