/* CSS Variables & Design Tokens — Segumar Red & White Edition */

:root {
    /* ── Core Palette ── */
    --color-primary:       #d32f2f;   /* Segumar Red */
    --color-primary-hover: #b71c1c;   /* Deep Red */
    --color-primary-light: #ff6659;   /* Light Red */
    --color-primary-dim:   rgba(211,47,47,0.08);

    /* ── Surface colors (light theme) ── */
    --color-bg:            #ffffff;   /* Pure White base */
    --color-bg-alt:        #f5f5f5;   /* Off-White / light sections */
    --color-bg-dark:       #0a0a0a;   /* Deep Black (footer, hero overlay) */
    --color-bg-card:       #ffffff;   /* Cards */
    --color-bg-card-hover: #fafafa;

    /* ── Text ── */
    --color-text:          #1a1a1a;   /* Main dark text on white */
    --color-text-muted:    #666666;   /* Secondary text */
    --color-text-light:    #ffffff;   /* Text on dark backgrounds */
    --color-text-gray:     #888888;

    /* ── Borders ── */
    --color-border:        #e8e8e8;
    --color-border-dark:   #2c2c2c;

    /* ── Status / Utility ── */
    --color-success:       #2e7d32;
    --color-error:         #c62828;
    --color-whatsapp:      #25d366;

    /* ── Typography ── */
    --font-heading: 'Montserrat', sans-serif;
    --font-body:    'Inter', sans-serif;

    /* ── Border Radius ── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-full: 9999px;

    /* ── Transitions ── */
    --transition-fast:   all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Shadows ── */
    --shadow-sm:  0 2px 8px  rgba(0,0,0,0.08);
    --shadow-md:  0 8px 24px rgba(0,0,0,0.12);
    --shadow-lg:  0 16px 48px rgba(0,0,0,0.16);
    --shadow-red: 0 8px 32px rgba(211,47,47,0.25);

    /* ── Glass (used on dark sections) ── */
    --glass-bg:     rgba(255,255,255,0.06);
    --glass-border: rgba(255,255,255,0.10);
    --glass-blur:   blur(12px);

    /* ── Z-Index ── */
    --z-back:     -10;
    --z-base:       1;
    --z-sticky:   100;
    --z-dropdown: 200;
    --z-modal:   1000;
    --z-floating:2000;
}