/* ============================================
   VARIABLES.CSS — Ooi Solutions
   ============================================ */

:root {
    /* ── BRAND COLORS ── */
    --accent:           #1D7C6E;
    --accent-hover:     #145F55;
    --accent-gold:      #E8C87A;
    --accent-red:       #CC4E3C;
    --accent-green-dot: #4ADE80;

    /* ── LIGHT THEME (Hero & Header) ── */
    --bg:              #F0EBE4;
    --bg-cream:         #F0EBE4;
    --bg-white:         #FFFFFF;
    --white:            #FFFFFF;
    --fg-dark:          #0a0a0a;
    --dark:             #123a34;
    --muted-dark:       #666;
    --border-dark:      rgba(0, 0, 0, 0.1);
    --card-dark:        rgba(0, 0, 0, 0.03);

    /* ── DARK THEME ── */
    --bg-dark:      #0D1F1C;
    --bg-dark-2:    #123A34;
    --fg:           #fafafa;
    --muted:        #a3a3a3;
    --border:       rgba(255, 255, 255, 0.08);
    --card:         rgba(255, 255, 255, 0.04);

    /* ── TYPOGRAPHY ── */
    --font-primary: 'Inter Tight', sans-serif;
    --font-weight-body:   400;
    --font-weight-medium: 600;
    --font-weight-bold:   700;
    --font-weight-black:  900;

    /* ── HEADING SIZES (Consistent across all sections) ── */
    --heading-hero:     clamp(4.5rem, 16vw, 16rem);
    --heading-section:  clamp(2.6rem, 6vw, 5.5rem);
    --heading-sub:      clamp(2rem, 4.5vw, 3.8rem);
    --heading-card:     clamp(1.3rem, 2vw, 1.8rem);
    --heading-label:    clamp(0.7rem, 1vw, 0.8rem);

    /* ── BODY SIZES ── */
    --body-lg:    clamp(1.1rem, 2vw, 1.75rem);
    --body-md:    clamp(1rem, 1.5vw, 1.15rem);
    --body-sm:    clamp(0.85rem, 1.2vw, 1rem);

    /* ── SPACING ── */
    --space-xs:  8px;
    --space-sm:  16px;
    --space-md:  24px;
    --space-lg:  48px;
    --space-xl:  80px;
    --space-2xl: 120px;
    --section-py: 120px;

    /* ── RADII ── */
    --radius-sm:   6px;
    --radius-md:   14px;
    --radius-lg:   24px;
    --radius-xl:   40px;
    --radius-full: 9999px;

    /* ── TRANSITIONS ── */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth:  cubic-bezier(0.23, 1, 0.32, 1);
    --ease-spring:  cubic-bezier(0.76, 0, 0.24, 1);
    --duration-fast: 0.3s;
    --duration-mid:  0.5s;
    --duration-slow: 0.7s;

    /* ── Z-INDEX ── */
    --z-content:      1;
    --z-header:       900;
    --z-mobile-menu:  1000;
    --z-hamburger:    1001;
    --z-modal:        9998;
    --z-cursor:       9999;
}