/* =========================
   Light Theme (Default)
   Main Color : #1E90FF
========================= */
:root {
    --color-background: #FFFFFF;

    --color-navbar: #F8FAFC;
    --color-navbar-button: #E2E8F0;

    --text-color: #1E293B;
    /* --text-color-1: #1E90FF; */

    --border-color: #1E90FF;

    /* --btn-bg-color-hover: #1C7ED6; */

    --color-primary: #1E90FF;
    --color-primary-hover: #1877D9;
    --color-danger: #EF4444;
    --color-danger-hover: #DC2626;
    --color-warning: #F59E0B;
    --color-warning-hover: #D97706;
    --color-success: #22C55E;
    --color-success-hover: #16A34A;
    --color-secondary: #E2E8F0;
    --color-secondary-hover: #CBD5E1;

    /* --bg-color: #4BA6FF; */
    /* --bg-color: #D2E9FF; */
    /* --bg-color-1: #8FC8FF; */
    /* --bg-color-1: #F8FAFC; */
    /* --bg-color-2: #D2E9FF; */
    /* --bg-color-3: #EBF5FF; */

    /* --welcom-bg-color: #FFFFFF; */

    /* --text-color: #061D33; */
    /* --text-color-1: #0047AB; */
    /* --text-color-1: #1E90FF; */
    /* --text-color-1: #1E90FF; */
    /* --text-color-hover: #FF8F1E; */

    /* --btn-bg-secondary-color: #BEBFC5; */
    /* --btn-border-secondary-color: #061D33; */
    /* --btn-text-secondary-color: #061D33; */

    /* --font-xs: 0.75rem;   12px */
    /* --font-sm: 0.875rem;  14px */
    /* --font-md: 1rem;      16px */
    /* --font-lg: 1.25rem;   20px */
    /* --font-xl: 1.5rem;    24px */
    /* --font-2xl: 2rem;     32px */
    /* --font-3xl: 2.5rem;   40px */

    --font-xs: 0.75rem;   /* 12px */
    --font-sm: 0.875rem;  /* 14px */
    --font-md: 1rem;      /* 16px */
    --font-lg: 1.125rem;  /* 18px */
    --font-xl: 1.25rem;   /* 20px */
    --font-2xl: 1.5rem;   /* 24px */
    --font-3xl: 2rem;     /* 32px */
    --font-4xl: 2.5rem;   /* 40px */

    --facebook-color:#1877F2;
    --youtube-color:#FF0000;
}
@media (max-width: 768px) {
    :root {
        --font-4xl: 2rem;     /* h1 ลดจาก 40px เหลือ 32px */
        --font-3xl: 1.75rem;  /* h2 ลดจาก 32px เหลือ 28px */
        --font-2xl: 1.5rem;   /* h3 ลดจาก 24px เหลือ 24px (หรือเท่าเดิม) */
        --font-xl: 1.25rem;   /* h4 */
        /* p และ small ให้เท่าเดิมเพื่อให้คงความอ่านง่าย */
    }
}

/* =========================
   Dark Theme
========================= */
[data-theme="dark"] {
    --color-background: #0F172A;

    --color-navbar: #1E293B;
    --color-navbar-button: #334155;

    --text-color: #F8FAFC;
    /* --text-color-1: #3B82F6; */

    --border-color: #3B82F6;

    /* --btn-bg-color-hover: #3AA0FF; */

    --color-primary: #3B82F6;
    --color-primary-hover: #2563EB;
    --color-danger: #F87171;
    --color-danger-hover: #EF4444;
    --color-warning: #FBBF24;
    --color-warning-hover: #F59E0B;
    --color-success: #4ADE80;
    --color-success-hover: #22C55E;
    --color-secondary: #94A3B8;
    --color-secondary-hover: #64748B;

    /* --bg-color: #061D33; */
    /* --bg-color: #1565B3; */
    /* --bg-color-1: #0C3A66; */
    /* --bg-color-1: #1E293B; */
    /* --bg-color-2: #1565B3; */
    /* --bg-color-3: #0066CC; */

    /* --welcom-bg-color: #061D33; */
    /* --welcom-bg-color: #0F172A; */
    
    /* --text-color: #D2E9FF; */
    /* --text-color-1: #F77F00; */
    /* --text-color-1: #FF8F1E; */
    /* --text-color-1: #3B82F6; */
}