/* ==================================================
   VARIABLES.CSS — Root Design Tokens
   Thai Flour Industry | Master Design System
   ห้ามใส่ค่าสีหรือขนาดฟอนต์นอกเหนือจากไฟล์นี้ในไฟล์อื่น
   ================================================== */

:root {
  /* ---------- Primary Palette ---------- */
  --color-deep-red: #9B3426;          /* Pantone 484 C — Primary CTA, Hero Headline */
  --color-deep-red-dark: #7C2A1E;     /* Hover state ของ Deep Red */
  --color-golden-yellow: #FFB653;     /* Pantone 1365 C — Secondary, Badge, Active */
  --color-golden-yellow-dark: #E89C36;/* Hover state ของ Golden Yellow */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* ---------- Secondary Palette ---------- */
  --color-leaf-green: #C0CE8C;        /* Pantone 7492 C — Success / Gluten-Free */
  --color-soft-blue: #C6D6F4;         /* Pantone 643 C — Info / Certification */
  --color-mahogany: #4F2D1D;          /* Pantone 4625 C — Footer / Since 1978 */
  --color-mahogany-light: #6E3F28;    /* Mahogany เฉดสว่างขึ้น — หัวไล่เฉด */
  --color-mahogany-dark: #3A2114;     /* Mahogany เฉดเข้มขึ้น — ท้ายไล่เฉด */

  /* ---------- Gradients ---------- */
  /* ไล่เฉดน้ำตาลแนวทแยง — พื้นแผงสินค้าตอนหุบ
     ค่ากลางคือ Mahogany ตัวจริง เฉดหัว-ท้ายจึงอ่านเป็นแสงเงาของสีเดียวกัน ไม่ใช่สีใหม่ */
  --gradient-mahogany: linear-gradient(
    160deg,
    var(--color-mahogany-light) 0%,
    var(--color-mahogany) 52%,
    var(--color-mahogany-dark) 100%
  );

  /* ---------- Neutral (derived, ใช้เฉพาะพื้นผิว/เส้นแบ่ง) ---------- */
  --color-surface: #FAF7F4;
  --color-surface-green: #EEF4E0;     /* เขียวอ่อน (tint ของ Leaf Green) */
  --color-surface-brown: #E9DED2;     /* น้ำตาลอ่อน (tint ของ Mahogany) — พื้นส่วน CSR */
  --color-surface-yellow: #FFF4E3;    /* เหลืองอ่อน (tint ของ Golden Yellow) — พื้นหัวหน้าและแผงข้อมูลของหน้าสินค้า */
  --color-hero-surface: #EEF1EA;      /* พื้นหลังส่วน Hero — ให้กลืนกับขอบภาพ hero_01.png */
  --color-border: rgba(0, 0, 0, 0.12);
  --color-border-light: rgba(255, 255, 255, 0.4); /* เส้นแบ่งบนพื้นสีเข้ม */
  --color-text: #000000;
  --color-text-muted: #4A4A4A;        /* Contrast 8.9:1 บนพื้นขาว (WCAG AA) */

  /* ---------- Typography Families ----------
     Roboto มาก่อนเพื่อให้อักษรละตินใช้ Roboto
     ส่วนอักษรไทยจะตกมาที่ Anuphan โดยอัตโนมัติ (B2B / Corporate) */
  --font-corporate: 'Roboto', 'Anuphan', sans-serif;
  /* B2C / Retail Brand (ตราเหรียญทองคู่) — สำรองไว้สำหรับหน้าแบรนด์ค้าปลีก */
  --font-retail: 'Work Sans', 'Kanit', sans-serif;

  /* ---------- Font Weights ---------- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- Font Sizes (Mobile-First / เลขคู่เท่านั้น) ---------- */
  --fs-h1: 28px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-h4: 18px;
  --fs-h5: 16px;
  --fs-h6: 14px;
  --fs-lead: 16px;
  --fs-body: 14px;
  --fs-small: 12px;
  --fs-caption: 10px;

  /* ---------- Layout Grid ---------- */
  --container-max: 1440px;
  --grid-margin: 16px;
  --grid-gutter: 16px;

  /* ---------- Spacing Scale (เลขคู่) ---------- */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* ---------- Radius / Elevation / Motion ---------- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(79, 45, 29, 0.08);
  --shadow-md: 0 8px 24px rgba(79, 45, 29, 0.12);
  --shadow-lg: 0 16px 48px rgba(79, 45, 29, 0.16);
  --transition-base: 0.24s ease;

  --navbar-height: 92px;

  /* ---------- Inline Icons ---------- */
  /* ไอคอนที่ฝังมากับ CSS สำหรับใช้เป็น mask — สีมาจาก background-color ของตัวที่เรียกใช้
     ใช้กับสิ่งที่วาดด้วย ::before / ::after ซึ่งใส่ <img> ไม่ได้
     เส้นในไฟล์เป็นสีดำทึบเพราะ mask สนใจแค่ความทึบ ไม่สนใจสีจริง */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* ---------- Tablet: 640px – 1024px ---------- */
@media (min-width: 640px) {
  :root {
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-h3: 24px;
    --fs-h4: 20px;
    --fs-h5: 18px;
    --fs-h6: 16px;
    --fs-lead: 16px;
    --fs-body: 14px;
    --fs-small: 12px;
    --fs-caption: 10px;

    --grid-margin: 24px;
    --grid-gutter: 24px;
  }
}

/* ---------- Desktop: >= 1024px ---------- */
@media (min-width: 1024px) {
  :root {
    --fs-h1: 48px;
    --fs-h2: 36px;
    --fs-h3: 28px;
    --fs-h4: 24px;
    --fs-h5: 20px;
    --fs-h6: 18px;
    --fs-lead: 18px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-caption: 12px;

    --grid-margin: 32px;
    --grid-gutter: 32px;

    --navbar-height: 108px;
  }
}