/* ============================================================================
   SDesigns Design System — Design tokens  (v1.0)
   ⚠️ แก้ที่ไฟล์นี้ไฟล์เดียวเพื่อเปลี่ยนทั้งระบบ

   ปรับโครงจากระบบดีไซน์ที่ใช้กับเฟอร์นิเจอร์กลางแจ้งของกลุ่มงานเดียวกัน
   โดยเปลี่ยนแกนสี ตรรกะงานพิมพ์ และถ้อยคำให้เป็นของ SDesigns เอง

   ที่มาของค่า (ค่าที่ "วัดจริง" เท่านั้น — ส่วนบันไดสีคือการอนุมาน ระบุไว้ชัด):
   1) ไฟล์โลโก้ต้นฉบับ (SDesign-Logo.ai · Logo_New-Color.ai · Horizon-SDesigns.ai)
      → ฟ้าแบรนด์ #31A2DB (วัดจากพื้นที่สีเรียบของลายมงกุฎ/โลโก้)
      → ดำตัดเส้น #132D39 / หมึกเข้ม
   2) www.sdesigns.co.th (เว็บที่ลูกค้าประกาศเอง)
      → #27343A · #465962 (Material Blue Grey 900/700) · #31C8DB (cyan)
   3) เอกสาร Company Profile ที่ลูกค้าส่ง (Canva, A4 1 หน้า)
      → โครงเนื้อหา: Overview · Journey · Manufacturing · Products · Services · Contact

   ค่าที่อนุมาน (ไม่ใช่วัดจากแบรนด์โดยตรง): บันไดสี 50–950 ทุกเฉด ยกเว้นขั้น 500
   ของฟ้าและขั้นที่ตรงกับสีที่เว็บประกาศ → ต้องให้เจ้าของแบรนด์ยืนยันก่อนใช้กับงานพิมพ์จริง
============================================================================ */

:root {
  /* ============ 1) GLOBAL COLORS ============ */
  /* Blue — ฟ้าแบรนด์ (จากโลโก้) · ขั้น 500 คือค่าจริงจากไฟล์โลโก้ */
  --blue-50: #F1F8FB;   --blue-100: #DEF0FA; --blue-200: #BFE5F9; --blue-300: #8FD3F6;
  --blue-400: #52BCF1; --blue-500: #31A2DB; --blue-600: #1280B7; --blue-700: #166790;
  --blue-800: #17516F; --blue-900: #163E53; --blue-950: #132D39;

  /* Slate — โทนหมึก/โครงสร้าง (จากเว็บลูกค้า) */
  --slate-50: #F6F9FA;   --slate-100: #EDF2F5; --slate-200: #DBE5EA; --slate-300: #C3D2D9;
  --slate-400: #9FB2BC; --slate-500: #78919E; --slate-600: #5C737F; --slate-700: #465962;
  --slate-800: #35454D; --slate-900: #27343A; --slate-950: #1A2428;

  /* Cyan — สีเน้นรอง (จากเว็บลูกค้า) ใช้กับกราฟ ไฮไลต์ข้อมูล ไม่ใช้เป็นสีแบรนด์หลัก */
  --cyan-50: #F1FAFB;   --cyan-100: #DEF7FA; --cyan-200: #BFF2F9; --cyan-300: #8FEAF6;
  --cyan-400: #52DFF1; --cyan-500: #31C8DB; --cyan-600: #12A4B7; --cyan-700: #168290;

  /* สถานะ */
  --green-50: #F6FEF9;  --green-100: #EDFCF2; --green-200: #D3F8DF; --green-300: #AAF0C4;
  --green-400: #73E2A3; --green-500: #3CCB7F; --green-600: #16B364; --green-700: #099250;
  --green-800: #087443; --green-900: #095C37;
  --red-50: #FFFBFA;    --red-100: #FEF3F2;  --red-200: #FEE4E2;  --red-300: #FECDCA;
  --red-400: #FDA29B;   --red-500: #F97066;  --red-600: #F04438;  --red-700: #D92D20;
  --red-800: #B42318;   --red-900: #912018;
  --yellow-50: #FFFAEB; --yellow-100: #FEF0C7; --yellow-200: #FEC84B; --yellow-300: #FDB022;
  --yellow-400: #F79009; --yellow-500: #DC6803; --yellow-600: #B54708; --yellow-700: #9B370D;

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

  /* ============ 2) ALIAS — ชื่อเชิงความหมายที่คอมโพเนนต์เรียกใช้ ============ */
  --bg: var(--white);
  --surface: var(--white);
  --surface-2: var(--slate-50);          /* พื้นอ่อน (การ์ดรอง/แถบสลับ) */
  --surface-3: var(--slate-100);         /* พื้นปุ่มรอง/ช่องกรอก */
  --surface-inverted: var(--slate-950);  /* แผงเข้ม (ปุ่มหลัก/แถบท้าย) */
  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --border-inverted: rgba(255, 255, 255, 0.22);

  /* ตัวอักษร — หัวข้อ = slate-950 · เนื้อความ = slate-700 (คอนทราสต์ผ่าน AA) */
  --fg: var(--slate-950);
  --fg-soft: var(--slate-700);
  --muted: var(--slate-500);
  --fg-disabled: var(--slate-300);
  --fg-inverted: var(--white);
  --icon: var(--slate-600);
  --icon-inverted: var(--white);

  /* แบรนด์: ปุ่มหลัก = blue-700 (ขาวทับได้ 6.21:1 ผ่าน AA)
     หมายเหตุที่ตรวจแล้ว: ขาวบน blue-500 (สีโลโก้) ได้เพียง 2.87:1 → ห้ามใช้เป็นพื้นปุ่มหรือพื้นข้อความ
     ใช้ blue-500 ได้เฉพาะเป็น "สีของลวดลาย/ไอคอนใหญ่/ตัวอักษรเน้นบนพื้นขาวที่ขนาดใหญ่" */
  --brand: var(--blue-700);
  --brand-strong: var(--blue-800);
  --brand-fg: var(--white);
  --brand-soft: var(--blue-50);
  --brand-border: var(--blue-200);

  /* accent = ฟ้าโลโก้ (ใช้กับตัวอักษรเน้น/ไอคอน/ไฮไลต์เท่านั้น) */
  --accent: var(--blue-500);
  --accent-fg: var(--white);
  --accent-soft: var(--blue-50);
  --accent-border: var(--blue-200);

  /* สถานะ */
  --success: var(--green-700);  --success-soft: var(--green-50);
  --warning: var(--yellow-500); --warning-soft: var(--yellow-50);
  --danger: var(--red-700);     --danger-soft: var(--red-50);
  --info: var(--slate-700);     --info-soft: var(--slate-100);

  /* โลโก้ (จากไฟล์ที่ลูกค้าส่ง) */
  --logo-primary: var(--blue-500);
  --logo-ink: var(--black);
  --logo-on-dark: var(--white);

  /* ============ 3) TYPOGRAPHY ============ */
  /* หัวเรื่อง = Gambetta (serif) + Noto Serif Thai · เนื้อหา/UI = General Sans + IBM Plex Sans Thai */
  --font-display: 'Gambetta', 'Noto Serif Thai', Georgia, serif;
  --font-body: 'General Sans', 'IBM Plex Sans Thai', Arial, sans-serif;
  --font-heading: var(--font-display);
  /* ฟอนต์ไทยที่ใช้เมื่อข้อความไม่มีอักษรละติน (จับคู่ตามน้ำหนักของฟอนต์อังกฤษ) */
  --font-thai-display: 'Noto Serif Thai', Georgia, serif;
  --font-thai-body: 'IBM Plex Sans Thai', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-display-01: 4.5rem;   --leading-display-01: 1.05;  --tracking-display-01: -0.02em;
  --text-display-02: 3rem;     --leading-display-02: 1.05;  --tracking-display-02: -0.02em;
  --text-headline-01: 2.25rem; --leading-headline-01: 1.05; --tracking-headline-01: -0.02em;
  --text-headline-02: 1.5rem;  --leading-headline-02: 1.25; --tracking-headline-02: -0.01em;
  --text-headline-03: 1.25rem; --leading-headline-03: 1.3;  --tracking-headline-03: 0;
  --text-body-01: 1.125rem;    --leading-body-01: 1.6;      --tracking-body-01: 0;
  --text-body-02: 1rem;        --leading-body-02: 1.6;      --tracking-body-02: 0;
  --text-body-03: 0.9375rem;   --leading-body-03: 1.6;      --tracking-body-03: 0.006em;
  --text-caption: 0.875rem;    --leading-caption: 1.45;     --tracking-caption: 0;
  --text-overline: 0.75rem;    --leading-overline: 1.4;     --tracking-overline: 0.08em;

  --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;

  /* ============ 4) SPACING — ฐาน 8px ============ */
  --space-xxs: 4px;  --space-xs: 8px;   --space-s: 16px;  --space-default: 24px;
  --space-m: 32px;   --space-l: 40px;   --space-xl: 48px; --space-2xl: 64px;
  --space-3xl: 80px; --space-4xl: 96px;

  /* ============ 5) RADIUS & BORDER ============ */
  --radius-s: 2px; --radius-m: 4px; --radius-l: 8px; --radius-xl: 12px; --radius-full: 9999px;
  --radius: var(--radius-m);
  --radius-sm: var(--radius-s);
  --radius-lg: var(--radius-l);
  --radius-2xl: var(--radius-xl);
  --border-width: 1px;

  /* ============ 6) ELEVATION ============ */
  --box-shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  --box-shadow-s: 0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10);
  --box-shadow-m: 0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10);
  --box-shadow-l: 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
  --box-shadow-xl: 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08);
  --box-shadow-xxl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
  --shadow-1: var(--box-shadow-s);
  --shadow-2: var(--box-shadow-m);
  --shadow-3: var(--box-shadow-xl);

  /* ============ 7) MOTION ============ */
  --duration-fast: 250ms; --duration-default: 500ms; --duration-slow: 1000ms;
  --ease-default: cubic-bezier(0.16, 1, 0.3, 1);
  --blur-default: 8px;

  /* ============ 8) GRID & LAYOUT ============ */
  --container-xs: 424px;   --container-s: 880px;  --container-base: 1280px; --container-l: 1920px;
  --container-content: 1280px;
  --grid-columns-desktop: 12; --grid-columns-tablet: 8; --grid-columns-mobile: 4;
  --grid-gutter: 32px;   --grid-gutter-mobile: 16px;
  --section-spacing-x: 80px;  --section-spacing-y: 96px;

  /* ---------- พื้นโทน / แถบสี ---------- */
  --tint-blue: linear-gradient(180deg, var(--blue-50) 0%, var(--white) 100%);
  --tint-slate: linear-gradient(180deg, var(--slate-50) 0%, var(--white) 100%);
  --tint-cyan: linear-gradient(180deg, var(--cyan-50) 0%, var(--white) 100%);
  --wash-hero: radial-gradient(900px 420px at 10% -10%, rgba(49, 162, 219, 0.18) 0%, rgba(255, 255, 255, 0) 60%),
               radial-gradient(760px 380px at 90% 0%, rgba(38, 50, 56, 0.06) 0%, rgba(255, 255, 255, 0) 62%);
  --panel-dark: var(--slate-950);
  --panel-dark-fg: var(--white);

  /* ลายมงกุฎ (จากไฟล์ลายที่ลูกค้าส่ง) — ใช้เป็นลายพื้น/ขอบตกแต่งเท่านั้น */
  --motif-crown: var(--blue-500);
  --motif-size: 48px;

  /* ชั้นงานพิมพ์ — A4 แนวตั้ง (ตามไฟล์ profile ที่ลูกค้าส่ง 595.5 × 842.25 pt) */
  --print-page-w: 210mm;
  --print-page-h: 297mm;
  --print-margin: 14mm;
  --print-ink: var(--slate-950);
  --print-paper: var(--white);
}

/* ============ DARK MODE (สำหรับหน้าเอกสาร/แดชบอร์ดเท่านั้น) ============ */
[data-theme='dark'] {
  --bg: #0B1419;
  --surface: #101C22;
  --surface-2: #16252C;
  --surface-3: #1D2F38;
  --surface-inverted: var(--blue-50);
  --border: #23373F;
  --border-strong: #2F4750;

  --fg: #F2F7F9;
  --fg-soft: #C6D5DB;
  --muted: #93A7AF;
  --fg-disabled: #5C7078;
  --fg-inverted: var(--slate-950);
  --icon: #C6D5DB;
  --icon-inverted: var(--slate-950);

  --brand: var(--blue-400);
  --brand-strong: var(--blue-300);
  --brand-fg: var(--slate-950);
  --brand-soft: #142832;
  --brand-border: #2A4756;

  --accent: var(--blue-300);
  --accent-fg: var(--slate-950);
  --accent-soft: #12303C;

  --success: var(--green-300);  --success-soft: rgba(115, 226, 163, 0.14);
  --warning: var(--yellow-300); --warning-soft: rgba(253, 176, 34, 0.14);
  --danger: var(--red-300);     --danger-soft: rgba(253, 162, 155, 0.14);
  --info: var(--slate-300);     --info-soft: rgba(206, 201, 192, 0.10);

  --tint-blue: linear-gradient(180deg, rgba(49, 162, 219, 0.12) 0%, var(--surface) 100%);
  --tint-slate: linear-gradient(180deg, rgba(198, 213, 219, 0.06) 0%, var(--surface) 100%);
  --tint-cyan: linear-gradient(180deg, rgba(0, 188, 212, 0.10) 0%, var(--surface) 100%);
  --wash-hero: radial-gradient(900px 420px at 10% -10%, rgba(49, 162, 219, 0.16) 0%, rgba(0, 0, 0, 0) 60%);

  --panel-dark: #071015;
  --panel-dark-fg: #F2F7F9;
  --shadow-2: 0px 4px 8px -2px rgba(0, 0, 0, 0.5);
  --shadow-3: 0px 20px 24px -4px rgba(0, 0, 0, 0.55);
}