/* ==========================================================================
   style.css — Global Design System
   KC INTERPRESS | โรงพิมพ์ครบวงจร

   Scope: CSS Variables, Reset, Typography, Layout System
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS (CSS Variables)
   -------------------------------------------------------------------------- */
:root {
    /* Brand Colors */
    --orange:         #f97316;
    --orange-dark:    #ea6c0a;
    --orange-light:   rgba(249,115,22,0.12);
    --orange-border:  rgba(249,115,22,0.20);
    --primary-green:  #10b981;
    --teal:           #14b8a6;

    /* Neutral Scale */
    --black:          #111111;
    --white:          #ffffff;
    --gray-50:        #f9f9f9;
    --gray-100:       #f5f5f5;
    --gray-200:       #e5e5e5;
    --gray-400:       #a3a3a3;
    --gray-600:       #525252;
    --gray-800:       #262626;

    /* Dark Surface */
    --dark-bg:        #161616;
    --dark-bg-mid:    #1a1a1a;
    --dark-border:    #252525;
    --dark-border-2:  #2a2a2a;

    /* Typography */
    --font-th:        'Prompt', sans-serif;
    --font-en:        'Space Grotesk', sans-serif;

    /* Border Radius */
    --radius-sm:      4px;
    --radius-md:      8px;
    --radius-lg:      16px;

    /* Shadows */
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:      0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg:      0 12px 40px rgba(0,0,0,0.10);

    /* Motion — ทั้งระบบใช้อันเดียวกัน */
    --transition:     all 0.28s cubic-bezier(0.4,0,0.2,1);

    /* Layout */
    --container:      1200px;
    --header-h:       68px;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family:             var(--font-th);
    color:                   var(--black);
    background:              var(--white);
    line-height:             1.65;
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a   { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul  { list-style: none; }
svg { max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   3. LAYOUT SYSTEM
   -------------------------------------------------------------------------- */
.container  { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section    { padding: 96px 0; }
.section-sm { padding: 64px 0; }

/* --------------------------------------------------------------------------
   4. TYPOGRAPHY SCALE
   -------------------------------------------------------------------------- */
.section-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-en); font-size: 11px; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 14px;
}
.section-label::before {
    content: ''; display: block; width: 20px; height: 2px;
    background: var(--orange); border-radius: 2px;
}

.section-heading {
    font-family: var(--font-th); font-size: clamp(28px,4vw,42px);
    font-weight: 700; line-height: 1.25; color: var(--black); letter-spacing: -0.02em;
}
.section-heading span { color: var(--orange); }

.section-sub {
    font-family: var(--font-th); font-size: 17px;
    color: var(--gray-600); margin-top: 10px; font-weight: 300;
}

/* --------------------------------------------------------------------------
   5. ANIMATION SYSTEM (shared by all pages)
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* --------------------------------------------------------------------------
   6. SHARED HELPERS
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }

.divider { width: 40px; height: 3px; background: var(--orange); border-radius: 2px; margin: 20px auto 0; }
.divider.left { margin-left: 0; }

.section-header-flex { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 48px; flex-wrap: wrap; gap: 16px; }

/* Dev helper: image placeholder */
.img-ph {
    background: var(--gray-100); border: 1.5px dashed var(--gray-400);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; color: var(--gray-400); font-family: var(--font-en);
    font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; width: 100%;
}
.img-ph i { font-size: 20px; opacity: 0.5; }
.img-ph span { opacity: 0.7; }