/* ═══════════════════════════════════════════════════════════
   Thongpin Design Tokens — Blue & White Tech Enterprise
   60% White/Light Blue · 30% Navy · 10% Blue CTA
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── 60% Light surfaces ── */
    --lux-bg: #FFFFFF;
    --lux-bg-alt: #EFF6FF;
    --lux-sand: #F0F5FF;
    --lux-sand-hover: #E0EDFF;
    --lux-border: #BFDBFE;
    --lux-brown-light: #EFF6FF;
    --lux-brown-mid: #DBEAFE;
    --lux-brown-warm: #BFDBFE;
    --lux-brown-rich: #3B82F6;

    /* ── 30% Brand & typography ── */
    --lux-espresso: #0F172A;
    --lux-espresso-mid: #1E3A5F;
    --lux-taupe: #1E293B;
    --lux-taupe-light: #334155;
    --lux-antique-gold: #2563EB;
    --lux-antique-gold-soft: rgba(37, 99, 235, 0.2);

    /* ── 10% CTA ── */
    --lux-amber: #2563EB;
    --lux-amber-bright: #3B82F6;
    --lux-amber-glow: rgba(37, 99, 235, 0.35);

    /* ── Dark exception (footer) ── */
    --lux-midnight: #0B1D3A;
    --lux-cream: #F8FAFC;
    --lux-cream-muted: rgba(248, 250, 252, 0.85);

    /* Legacy map → blue */
    --gold: #2563EB;
    --gold-light: #60A5FA;
    --gold-dark: #1D4ED8;
    --gold-glow: rgba(37, 99, 235, 0.35);
    --brown-dark: #0F172A;
    --brown: #1E3A5F;
    --brown-mid: #1E293B;
    --brown-soft: #475569;
    --white: #FFFFFF;
    --off-white: #EFF6FF;
    --cream: #F0F5FF;

    --font: 'IBM Plex Sans Thai', 'Inter', system-ui, sans-serif;
    --font-display: 'IBM Plex Sans Thai', 'Inter', system-ui, sans-serif;
    --leading-body: 1.75;
    --leading-heading: 1.2;

    --shadow-soft: 0 4px 24px rgba(15, 23, 42, 0.06);
    --shadow-card: 0 8px 32px rgba(15, 23, 42, 0.08);
    --shadow-lift: 0 16px 48px rgba(15, 23, 42, 0.1);
    --radius: 16px;
    --radius-lg: 20px;
    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --section-y: clamp(80px, 10vw, 120px);
}

body {
    font-family: var(--font);
    font-weight: 400;
    line-height: var(--leading-body);
    background: var(--lux-bg);
    color: var(--lux-espresso);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--leading-heading);
    letter-spacing: -0.02em;
    color: var(--lux-espresso);
}

p, li, label {
    line-height: var(--leading-body);
    color: var(--lux-espresso);
}

.section-header p,
.credibility-head p,
.services .section-header p,
.why .section-header p,
.contact .section-header p,
.process .section-header p,
.portfolio .section-header p,
.tech .section-header p {
    color: var(--lux-espresso);
    font-weight: 400;
}

.section-tag {
    color: var(--lux-antique-gold) !important;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.section-tag::before {
    background: linear-gradient(90deg, transparent, var(--lux-antique-gold)) !important;
}

.section-tag::after {
    background: linear-gradient(90deg, var(--lux-antique-gold), transparent) !important;
}

.lux-card,
.cred-card,
.about-duo-card,
.about-value,
.service-card,
.process-step,
.why-card,
.contact-item,
.portfolio-card {
    background: var(--lux-sand) !important;
    border: 1px solid var(--lux-border) !important;
    box-shadow: var(--shadow-soft) !important;
}

.lux-card:hover,
.cred-card:hover,
.about-duo-card:hover,
.about-value:hover,
.service-card:hover,
.process-step:hover,
.why-card:hover,
.contact-item:hover,
.portfolio-card:hover {
    background: var(--lux-sand-hover) !important;
    border-color: var(--lux-antique-gold) !important;
    box-shadow: var(--shadow-card) !important;
}

.btn-primary {
    background: linear-gradient(135deg, var(--lux-amber-bright) 0%, var(--lux-amber) 55%, #1D4ED8 100%) !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 8px 28px var(--lux-amber-glow) !important;
}

.btn-primary:hover {
    box-shadow: 0 12px 36px rgba(37, 99, 235, 0.45) !important;
    transform: translateY(-3px);
}

.btn-outline {
    border: 2px solid var(--lux-antique-gold) !important;
    color: var(--lux-espresso) !important;
    background: transparent !important;
}

.btn-outline:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    border-color: var(--lux-amber) !important;
    color: var(--lux-espresso) !important;
}

.tab-btn.active,
.lang-switch a.active,
.hero-dot.active {
    background: linear-gradient(90deg, var(--lux-amber-bright), var(--lux-amber)) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 16px var(--lux-amber-glow) !important;
}

.stat-num {
    background: linear-gradient(135deg, var(--lux-espresso), var(--lux-amber-bright));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    color: var(--lux-espresso) !important;
}