/* ============================================================
   OMC Design System — tokens
   Shared by the public site and the admin. Use the tokens,
   never a raw hex value, so the brand stays consistent.
   ============================================================ */

:root {
    /* ---- Brand: OMC Orange ------------------------------------
       Orange is an accent: primary CTA, highlight, link, icon
       accent, active state. Never a full-page background.       */
    --omc-orange:        #F26B21;
    --omc-orange-600:    #DD5710;
    --omc-orange-700:    #B8450A;
    --omc-orange-400:    #FF8A3D;
    --omc-orange-100:    #FFE2CE;
    --omc-orange-50:     #FFF3EA;
    --omc-orange-gradient: linear-gradient(135deg, #FF8A3D 0%, #F26B21 55%, #E85D14 100%);

    /* ---- Neutrals --------------------------------------------- */
    --omc-ink:           #1E2430;   /* headings */
    --omc-text:          #384252;   /* body text */
    --omc-muted:         #6B7480;   /* secondary text */
    --omc-faint:         #9AA1AC;   /* meta text */
    --omc-line:          #E8EAEE;   /* thin borders */
    --omc-line-strong:   #D8DBE1;
    --omc-surface:       #FFFFFF;
    --omc-surface-alt:   #F7F8FA;
    --omc-surface-sunk:  #F1F3F6;
    --omc-footer:        #2A2F38;
    --omc-footer-line:   #3C424C;
    --omc-footer-text:   #A9AEB7;

    /* ---- Status ----------------------------------------------- */
    --omc-success:       #12855A;
    --omc-success-bg:    #E6F5EF;
    --omc-warning:       #B4690E;
    --omc-warning-bg:    #FDF3E3;
    --omc-danger:        #C0392B;
    --omc-danger-bg:     #FDECEA;
    --omc-info:          #1D6FB8;
    --omc-info-bg:       #E9F2FB;

    /* ---- Typography -------------------------------------------- */
    --omc-font: "Noto Sans Thai", "IBM Plex Sans Thai", "Sarabun", "Segoe UI",
                system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

    --omc-text-xs:   0.75rem;   /* 12px */
    --omc-text-sm:   0.8125rem; /* 13px */
    --omc-text-base: 0.9375rem; /* 15px */
    --omc-text-md:   1rem;      /* 16px */
    --omc-text-lg:   1.125rem;  /* 18px */
    --omc-text-xl:   1.375rem;  /* 22px */
    --omc-text-2xl:  1.75rem;   /* 28px */
    --omc-text-3xl:  2.25rem;   /* 36px */
    --omc-text-4xl:  2.875rem;  /* 46px */

    /* ---- Spacing scale ----------------------------------------- */
    --omc-space-1: 4px;
    --omc-space-2: 8px;
    --omc-space-3: 12px;
    --omc-space-4: 16px;
    --omc-space-5: 24px;
    --omc-space-6: 32px;
    --omc-space-7: 48px;
    --omc-space-8: 64px;
    --omc-space-9: 88px;

    /* ---- Radius ------------------------------------------------ */
    --omc-radius-sm:  6px;
    --omc-radius:     10px;
    --omc-radius-lg:  14px;
    --omc-radius-xl:  20px;
    --omc-radius-pill: 999px;

    /* ---- Elevation (soft, never heavy) -------------------------- */
    --omc-shadow-xs: 0 1px 2px rgba(24, 32, 44, 0.05);
    --omc-shadow-sm: 0 1px 3px rgba(24, 32, 44, 0.06), 0 1px 2px rgba(24, 32, 44, 0.04);
    --omc-shadow:    0 4px 16px rgba(24, 32, 44, 0.07);
    --omc-shadow-lg: 0 12px 32px rgba(24, 32, 44, 0.10);
    --omc-shadow-orange: 0 8px 20px rgba(242, 107, 33, 0.28);

    /* ---- Layout ------------------------------------------------- */
    --omc-container: 1200px;
    --omc-header-h:  72px;

    /* ---- Motion (restrained by design) -------------------------- */
    --omc-transition: 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
    :root { --omc-transition: 0ms; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}