/* ==========================================
   wikopn Universal Design System - Color Tokens
   Palette: Multi-category E-Commerce
   70% White/Light | 20% Dark | 10% Bright
   ========================================== */

:root {
    /* ── Core Brand Colors (Logo: Black Bunny & Wikopn text with #F02121 Red accent) ── */
    --primary-color: #F02121;        /* Red – Brand accent matching logo dot/eye, main buttons, active tabs */
    --primary-dark: #D91414;         /* Deeper red – hover states */
    --primary-deep: #111111;         /* Pure professional black – headings, strong titles */
    --primary-light: #FF4D4D;        /* Vibrant red – badges & highlights */
    --primary-glow: rgba(240, 33, 33, 0.35); /* Soft red glow */
    --primary-bg-light: #F8F9FA;     /* Very light clean gray – page background */
    --primary-tint: #FFF1F1;         /* Ultra-soft red tint – hover backgrounds */
    --primary-subtle: #FFF8F8;       /* Delicate soft red wash */

    /* ── Action Colors ── */
    --buy-now-color: #F02121;        /* Brand Red – Buy Now button */
    --buy-now-dark: #D91414;         /* Dark red – hover */
    --accent-cyan: #00B8D9;          /* Cyan – New badge */
    --accent-yellow: #FFB703;        /* Yellow – star rating / highlight */
    --accent-yellow-dark: #E69D00;   /* Yellow hover */

    /* ── Status Colors ── */
    --accent-color: #F02121;         /* Red – Sale badge, error */
    --accent-hover: #D91414;         /* Darker red */
    --success-color: #16A34A;        /* Green – Success/order status */
    --success-dark: #15803D;
    --warning-color: #F59E0B;        /* Yellow – warning */
    --info-color: #0284C7;           /* Cyan/Blue – info */

    /* ── Typography ── */
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    --font-family: var(--font-sans);

    /* ── Text Colors ── */
    --text-primary: #111111;         /* Pure professional black – headings & main text */
    --text-secondary: #374151;       /* Dark charcoal gray – secondary text */
    --text-muted: #6B7280;           /* Muted gray – captions/hints */
    --text-light: #9CA3AF;           /* Light gray – placeholders */

    /* ── Borders ── */
    --border-color: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(240, 33, 33, 0.35);
    --border-light: #E5E7EB;

    /* ── Surfaces ── */
    --bg-main: #F8F9FA;              /* Page background */
    --bg-card: #FFFFFF;              /* Card white */
    --bg-alt: #F1F3F8;               /* Alternate sections */
    --bg-dark: #111111;              /* Footer / dark sections */
    --bg-dark-secondary: #1A1A1A;    /* Footer column bg */
    --bg-overlay: rgba(17, 17, 17, 0.60);
    --glass-bg: rgba(255, 255, 255, 0.94);
    --glass-border: rgba(255, 255, 255, 0.70);
    --glass-blur: blur(16px);

    /* ── Shadows ── */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 4px 14px -2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 25px -4px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 42px -8px rgba(0, 0, 0, 0.10);
    --shadow-xl: 0 30px 64px -12px rgba(0, 0, 0, 0.14);
    --shadow-glow: 0 8px 24px rgba(240, 33, 33, 0.28);
    --shadow-orange: 0 8px 24px rgba(240, 33, 33, 0.30);
    --shadow-overlay: -12px 0 40px rgba(0, 0, 0, 0.20);

    /* ── Border Radius ── */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* ── Transitions ── */
    --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}