/* ============================================================
   COOPNIX — Design Tokens V.3 "Blue Light"
   Reference: coopnix.co.th + Atlassian/Stripe
   ============================================================ */

:root {
    /* === PRIMARY PALETTE === */
    --color-primary:        #0099FF;
    --color-primary-light:  #4DB8FF;
    --color-primary-dark:   #0066CC;
    --color-primary-hover:  #007ACC;
    --color-primary-bg:     rgba(0, 153, 255, 0.08);

    /* === ACCENT === */
    --color-accent:         #00C9A7;
    --color-accent-light:   #33D9BF;

    /* === BADGE / LABELS === */
    --color-badge-red:      #E53935;
    --color-badge-gold:     #FFB121;
    --color-badge-green:    #36B37E;
    --color-danger:         #E53935;

    /* === BACKGROUNDS === */
    --bg-body:              #F4F5F7;
    --bg-surface:           #FFFFFF;
    --bg-card:              #FFFFFF;
    --bg-card-hover:        #FAFBFC;
    --bg-section-alt:       #F7F8FC;
    --bg-input:             #FAFBFC;
    --bg-nav:               rgba(255, 255, 255, 0.96);
    --bg-hero:              #091E42;

    /* === TEXT === */
    --text-primary:         #172B4D;
    --text-secondary:       #505F79;
    --text-muted:           #97A0AF;
    --text-heading:         #091E42;
    --text-on-dark:         #FFFFFF;
    --text-on-primary:      #FFFFFF;

    /* === BORDERS === */
    --border-subtle:        #DFE1E6;
    --border-card:          #EBECF0;
    --border-input:         #DFE1E6;
    --border-focus:         var(--color-primary);

    /* === GRADIENTS === */
    --gradient-hero:        linear-gradient(135deg, #091E42 0%, #0D3178 50%, #1A4B9C 100%);
    --gradient-hero-overlay: linear-gradient(90deg, rgba(9,30,66,0.92) 0%, rgba(9,30,66,0.6) 60%, rgba(9,30,66,0.3) 100%);
    --gradient-cta:         linear-gradient(135deg, #0099FF, #00C9A7);
    --gradient-gold:        linear-gradient(135deg, #FFB121, #FF8B00);
    --gradient-navy:        linear-gradient(180deg, #091E42 0%, #172B4D 100%);

    /* Pricing tiers */
    --gradient-tier-bronze: linear-gradient(135deg, #E6F0FF, #B3D4FF);
    --gradient-tier-silver: linear-gradient(135deg, #0099FF, #0066CC);
    --gradient-tier-gold:   linear-gradient(135deg, #FFB121, #FF8B00);
    --gradient-tier-diamond:linear-gradient(135deg, #003D99, #091E42);

    /* === TYPOGRAPHY === */
    --font-heading:         'Noto Sans Thai', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body:            'Noto Sans Thai', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:            'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    --fs-hero:              clamp(2rem, 4.5vw, 3rem);
    --fs-h1:                clamp(1.6rem, 3.5vw, 2.4rem);
    --fs-h2:                clamp(1.3rem, 2.8vw, 1.8rem);
    --fs-h3:                clamp(1.1rem, 2.2vw, 1.4rem);
    --fs-h4:                clamp(0.95rem, 1.8vw, 1.15rem);
    --fs-body:              1rem;
    --fs-sm:                0.875rem;
    --fs-xs:                0.75rem;

    --fw-regular:           400;
    --fw-medium:            500;
    --fw-semibold:          600;
    --fw-bold:              700;
    --fw-extrabold:         800;

    --lh-tight:             1.25;
    --lh-normal:            1.6;
    --lh-relaxed:           1.8;

    /* === SPACING === */
    --space-xs:             0.25rem;
    --space-sm:             0.5rem;
    --space-md:             1rem;
    --space-lg:             1.5rem;
    --space-xl:             2rem;
    --space-2xl:            3rem;
    --space-3xl:            4rem;
    --space-4xl:            4rem;
    --space-section:        clamp(3rem, 5vw, 4rem);

    /* === LAYOUT === */
    --container-max:        1200px;
    --container-wide:       1400px;
    --container-narrow:     800px;
    --nav-height:           68px;

    /* === RADIUS — mixed sharp+round === */
    --radius-sm:            4px;
    --radius-md:            8px;
    --radius-lg:            12px;
    --radius-xl:            20px;
    --radius-full:          9999px;
    /* Signature: sharp top-left + round others */
    --radius-card:          2px 12px 12px 12px;
    --radius-card-alt:      12px 2px 12px 12px;
    --radius-btn:           2px 8px 8px 8px;
    --radius-badge:         2px 6px 6px 6px;
    --radius-pricing:       2px 16px 16px 16px;

    /* === SHADOWS (light theme) === */
    --shadow-sm:            0 1px 3px rgba(9, 30, 66, 0.08);
    --shadow-md:            0 4px 12px rgba(9, 30, 66, 0.08), 0 1px 3px rgba(9, 30, 66, 0.05);
    --shadow-lg:            0 8px 24px rgba(9, 30, 66, 0.1), 0 2px 8px rgba(9, 30, 66, 0.06);
    --shadow-xl:            0 16px 48px rgba(9, 30, 66, 0.12);
    --shadow-card:          0 1px 4px rgba(9, 30, 66, 0.08), 0 0 0 1px rgba(9, 30, 66, 0.04);
    --shadow-card-hover:    0 8px 24px rgba(9, 30, 66, 0.12), 0 0 0 1px rgba(0, 153, 255, 0.15);
    --shadow-nav:           0 2px 8px rgba(9, 30, 66, 0.08);
    --shadow-pricing-glow:  0 0 24px rgba(255, 177, 33, 0.25);

    /* === TRANSITIONS === */
    --transition-fast:      150ms ease;
    --transition-base:      250ms ease;
    --transition-slow:      400ms ease;
    --transition-spring:    400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* === Z-INDEX === */
    --z-dropdown:           100;
    --z-sticky:             200;
    --z-nav:                300;
    --z-overlay:            400;
    --z-modal:              500;
}