/* =============================
   Design Tokens — SiamFinn
============================= */

:root {
    /* ---- Brand ---- */
    --primary: #FF6A00;
    --primary-hover: #E85D00;
    --primary-dark: #C74A00;
    --primary-light: #FFF1E8;
    --secondary: #FF9A4A;
    --accent-amber: #FFB661;

    /* ---- Surfaces ---- */
    --white: #FFFFFF;
    --background: #FFFDFC;
    --background-soft: #FFF7F2;
    --background-deep: #FFEFE3;

    /* ---- Text ---- */
    --text: #221A15;
    --text-secondary: #6B6058;
    --text-muted: #8C817A;
    --text-on-primary: #FFFFFF;

    /* ---- Lines & Glass ---- */
    --border: rgba(255, 106, 0, 0.14);
    --border-strong: rgba(255, 106, 0, 0.26);
    --border-neutral: rgba(34, 26, 21, 0.08);

    --glass: rgba(255, 255, 255, 0.68);
    --glass-strong: rgba(255, 255, 255, 0.86);
    --glass-tint: rgba(255, 244, 236, 0.62);
    --glass-border: rgba(255, 255, 255, 0.78);

    --blur-sm: 10px;
    --blur-md: 18px;
    --blur-lg: 28px;

    /* ---- Gradients ---- */
    --gradient-primary: linear-gradient(135deg, #FF8A2B 0%, #FF6A00 55%, #F05600 100%);
    --gradient-soft: linear-gradient(140deg, #FFF6EE 0%, #FFFFFF 60%, #FFF1E4 100%);
    --gradient-glow: radial-gradient(circle at 50% 50%, rgba(255, 138, 43, 0.55) 0%, rgba(255, 138, 43, 0) 70%);

    /* ---- Radius ---- */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 26px;
    --radius-xl: 36px;
    --radius-pill: 999px;

    /* ---- Shadow ---- */
    --shadow-xs: 0 2px 8px rgba(120, 60, 20, 0.05);
    --shadow-sm: 0 6px 18px rgba(120, 60, 20, 0.07);
    --shadow-md: 0 16px 38px rgba(120, 60, 20, 0.09);
    --shadow-lg: 0 28px 64px rgba(120, 60, 20, 0.12);
    --shadow-primary: 0 12px 28px rgba(255, 106, 0, 0.28);
    --shadow-primary-hover: 0 18px 36px rgba(255, 106, 0, 0.34);
    --shadow-inset-glass: inset 0 1px 0 rgba(255, 255, 255, 0.85);

    /* ---- Layout ---- */
    --container: 1220px;
    --container-narrow: 900px;
    --gutter: 24px;
    /* ระยะห่าง "รวม" ที่ตาเห็นระหว่าง section สองอันที่ติดกัน
       (.section ใส่ padding บน-ล่างอันละครึ่งหนึ่งของค่านี้ ค่านี้จึงคือช่องว่างจริง) */
    --section-space: clamp(92px, 9vw, 136px);
    --header-height: 76px;

    /* ---- Typography ---- */
    --font-base: 'Kanit', 'Segoe UI', Arial, sans-serif;
    --fs-display: clamp(2.1rem, 1.3rem + 3.4vw, 3.65rem);
    --fs-h1: clamp(1.95rem, 1.3rem + 2.7vw, 3.1rem);
    --fs-h2: clamp(1.6rem, 1.15rem + 1.9vw, 2.45rem);
    --fs-h3: clamp(1.18rem, 1.03rem + 0.6vw, 1.45rem);
    --fs-body: clamp(1rem, 0.97rem + 0.14vw, 1.075rem);
    --fs-sm: 0.945rem;
    --fs-xs: 0.85rem;

    --lh-tight: 1.28;
    --lh-body: 1.75;

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 160ms;
    --dur-base: 260ms;
    --dur-slow: 520ms;

    /* ---- Misc ---- */
    --focus-ring: #B24400;

    /* ---- Z-index scale ---- */
    --z-orb: 0;
    --z-content: 1;
    --z-sticky: 40;
    --z-header: 50;
    --z-overlay: 60;
    --z-drawer: 70;
}