@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600&family=Mali:wght@400;500;600;700&family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');

:root {
    /* Brand pinks */
    --color-pink-50:  #FFF5F7;
    --color-pink-100: #FFE4EC;
    --color-pink-200: #FFC1D6;
    --color-pink-300: #FFA3C2;
    --color-pink-400: #FF8AB0;
    --color-pink-500: #FF6B9D;
    --color-pink-600: #E8528A;
    --color-pink-700: #C13E72;

    /* Cream / warm whites */
    --color-cream-50:  #FFFCF8;
    --color-cream-100: #FFF7EE;
    --color-cream-200: #FFF0E0;

    /* Text */
    --color-text-primary:   #2D1B2E;
    --color-text-secondary: #6B5B6E;
    --color-text-muted:     #9E8FA1;
    --color-text-inverse:   #FFFFFF;

    /* Semantic */
    --color-success:     #4CAF7A;
    --color-success-bg:  #E8F5EE;
    --color-warning:     #F4A847;
    --color-warning-bg:  #FFF8EC;
    --color-danger:      #E5484D;
    --color-danger-bg:   #FEF0F0;
    --color-info:        #5B9BD5;
    --color-info-bg:     #EDF4FB;

    /* Surfaces */
    --color-border:   #F0E0E8;
    --color-bg:       #FFFCFD;
    --color-bg-soft:  #FFF5F8;
    --color-bg-card:  #FFFFFF;
    --color-bg-hover: #FFF0F5;
    --color-overlay:  rgba(45, 27, 46, 0.4);

    /* Radii */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* Shadows (pink-tinted) */
    --shadow-sm:  0 1px 3px rgba(255, 107, 157, 0.08);
    --shadow-md:  0 4px 12px rgba(255, 107, 157, 0.12);
    --shadow-lg:  0 8px 24px rgba(255, 107, 157, 0.15);
    --shadow-xl:  0 12px 40px rgba(255, 107, 157, 0.18);

    /* Typography */
    --font-sans:    'IBM Plex Sans Thai', 'Noto Sans Thai', 'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    'IBM Plex Sans Thai', 'Noto Sans Thai', 'Sarabun', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Mali', 'Noto Sans Thai', sans-serif;

    --text-xs:   0.75rem;
    --text-sm:   0.8125rem;
    --text-base: 0.9375rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.375rem;
    --text-3xl:  1.75rem;
    --text-4xl:  2rem;

    --leading-tight:  1.3;
    --leading-normal: 1.6;
    --leading-loose:  1.8;

    --weight-light:    300;
    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* Spacing */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* Layout */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1200px;
    --container-2xl: 1440px;

    --header-height: 60px;

    /* Convenience shadows */
    --color-pink-shadow:      rgba(255, 107, 157, 0.12);
    --color-pink-shadow-deep: rgba(255, 107, 157, 0.20);

    /* Easing */
    --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-base: 300ms var(--ease-soft);

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   350ms ease;

    /* Z-index scale */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-fixed:     300;
    --z-overlay:   400;
    --z-modal:     500;
    --z-toast:     600;
}

@media (min-width: 1024px) {
    :root {
        --text-base: 1rem;
        --text-lg:   1.25rem;
        --text-xl:   1.5rem;
        --text-2xl:  1.625rem;
        --text-3xl:  2rem;
        --text-4xl:  2.5rem;
        --header-height: 72px;
    }
}

html.dark-mode {
    --color-featured-bg: #2D1A25;

    --color-text-primary:   #F5E8EE;
    --color-text-secondary: #C8B0C0;
    --color-text-muted:     #9E8FA1;

    --color-border:   #3A2A35;
    --color-bg:       #1A1018;
    --color-bg-soft:  #221520;
    --color-bg-card:  #2A1E28;
    --color-bg-hover: #2D1A25;
    --color-overlay:  rgba(10, 5, 10, 0.7);

    --color-cream-50:  #221520;
    --color-cream-100: #2A1E28;
    --color-cream-200: #3A2A35;

    --color-pink-50:  #2D1A25;
    --color-pink-100: #3D2235;

    --color-success-bg:  #1A2820;
    --color-warning-bg:  #2A2218;
    --color-danger-bg:   #2A1818;
    --color-info-bg:     #1A2230;

    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-xl:  0 12px 40px rgba(0, 0, 0, 0.6);
}