@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&display=swap');
body { 
    font-family: 'IBM Plex Sans Thai', sans-serif; 
}

:root {
    --font-Space: 'Space Grotesk', sans-serif;
    --primary-color: var(--app-primary, #06b6d4);
    --primary-color-dark: color-mix(in srgb, var(--app-primary, #06b6d4) 70%, #0f172a);
    --primary-color-light: color-mix(in srgb, var(--app-primary, #06b6d4) 78%, white);
    --shadow-color: color-mix(in srgb, var(--app-primary, #06b6d4) 35%, transparent);
}

/* App theme utilities (opt-in):
   ใช้คลาส app-* แทนการ override utility ของ Tailwind ทั้งระบบ */
.app-bg-primary { background-color: var(--app-primary, #06b6d4); }
.app-bg-primary-soft { background-color: color-mix(in srgb, var(--app-primary, #06b6d4) 12%, white); }
.app-bg-primary-soft-30 { background-color: color-mix(in srgb, var(--app-primary, #06b6d4) 30%, white); }
.app-bg-primary-dark { background-color: color-mix(in srgb, var(--app-primary, #06b6d4) 82%, #0f172a); }
.app-bg-primary-strong { background-color: color-mix(in srgb, var(--app-primary, #06b6d4) 90%, #020617); }
.app-bg-secondary { background-color: var(--app-secondary, #8b5cf6); }
.app-bg-secondary-soft { background-color: color-mix(in srgb, var(--app-secondary, #8b5cf6) 14%, white); }

.app-text-primary { color: var(--app-primary, #06b6d4); }
.app-text-primary-strong { color: color-mix(in srgb, var(--app-primary, #06b6d4) 82%, #0f172a); }
.app-text-secondary { color: var(--app-secondary, #8b5cf6); }

.app-border-primary { border-color: color-mix(in srgb, var(--app-primary, #06b6d4) 58%, white); }
.app-border-primary-soft { border-color: color-mix(in srgb, var(--app-primary, #06b6d4) 32%, white); }
.app-border-secondary { border-color: color-mix(in srgb, var(--app-secondary, #8b5cf6) 58%, white); }
.app-border-secondary-soft { border-color: color-mix(in srgb, var(--app-secondary, #8b5cf6) 34%, white); }

.app-focus-border-primary:focus { border-color: color-mix(in srgb, var(--app-primary, #06b6d4) 58%, white); }
.app-ring-primary:focus { --tw-ring-color: color-mix(in srgb, var(--app-primary, #06b6d4) 16%, white); }

.app-hover-bg-primary:hover { background-color: color-mix(in srgb, var(--app-primary, #06b6d4) 82%, #0f172a); }
.app-hover-bg-primary-solid:hover { background-color: var(--app-primary, #06b6d4); }
.app-hover-text-primary:hover { color: color-mix(in srgb, var(--app-primary, #06b6d4) 72%, #0f172a); }
.app-hover-border-primary:hover { border-color: color-mix(in srgb, var(--app-primary, #06b6d4) 42%, white); }
.app-shadow-primary-soft { box-shadow: 0 10px 28px -16px color-mix(in srgb, var(--app-primary, #06b6d4) 45%, transparent); }
.app-hover-shadow-primary:hover { box-shadow: 0 12px 30px -14px color-mix(in srgb, var(--app-primary, #06b6d4) 45%, transparent); }
.app-hover-text-white:hover { color: #fff; }
.app-ring-primary-strong { --tw-ring-color: color-mix(in srgb, var(--app-primary, #06b6d4) 35%, white); }

.app-gradient-primary-secondary {
    background-image: linear-gradient(
        90deg,
        color-mix(in srgb, var(--app-primary, #06b6d4) 24%, white),
        color-mix(in srgb, var(--app-secondary, #8b5cf6) 38%, white)
    );
}

.app-text-gradient-primary-secondary {
    background-image: linear-gradient(
        90deg,
        color-mix(in srgb, var(--app-primary, #06b6d4) 88%, #0f172a),
        color-mix(in srgb, var(--app-secondary, #8b5cf6) 88%, #0f172a)
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.font-Space {
    font-family: var(--font-Space);
}
.font-ibm{
    font-family: 'IBM Plex Sans Thai', sans-serif;
}

/* Mobile interaction stability:
   - reduce double-tap zoom behavior
   - prevent iOS auto-zoom on form focus */
html, body {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
}

a, button, [role="button"], input, select, textarea, label {
    touch-action: manipulation;
}

@media (max-width: 1024px) {
    input, select, textarea, button {
        font-size: 16px !important;
    }
}