/* ============================================================
   wolowo Design Tokens / CSS Variables
   Central source of truth for colors, typography, spacing,
   border-radius, shadows and transitions.
   ============================================================ */

:root {
    /* ---- Brand Colors ---- */
    --w-primary:        #aa0b57;
    --w-primary-dark:   #8a0947;
    --w-primary-light:  #fdf2f8;
    --w-secondary:      #009ee0;
    --w-secondary-dark: #007ab8;

    /* ---- Neutral Colors ---- */
    --w-dark:           #28323e;
    --w-text:           #3d3c3f;
    --w-text-muted:     #666;
    --w-text-light:     #888;
    --w-text-lighter:   #999;
    --w-border:         #ddd;
    --w-border-light:   #e0e0e0;
    --w-border-lighter: #eee;
    --w-bg:             #fff;
    --w-bg-light:       #f5f5f5;
    --w-bg-lighter:     #f8f8f8;
    --w-black:          #000;
    --w-white:          #fff;

    /* ---- Status Colors ---- */
    --w-success:        #5cb85c;
    --w-info:           #5bc0de;
    --w-warning:        #f0ad4e;
    --w-danger:         #d9534f;

    /* ---- Typography Scale ---- */
    --w-font-xs:        12px;
    --w-font-sm:        13px;
    --w-font-base:      14px;
    --w-font-md:        16px;
    --w-font-lg:        18px;
    --w-font-xl:        20px;
    --w-font-xxl:       22px;
    --w-font-xxxl:      28px;

    /* ---- Spacing Scale (4px base) ---- */
    --w-space-1:        4px;
    --w-space-2:        8px;
    --w-space-3:        12px;
    --w-space-4:        16px;
    --w-space-5:        20px;
    --w-space-6:        24px;
    --w-space-8:        32px;
    --w-space-10:       40px;

    /* ---- Border Radius ---- */
    --w-radius-sm:      4px;
    --w-radius-md:      6px;
    --w-radius-lg:      8px;
    --w-radius-xl:      12px;
    --w-radius-2xl:     16px;
    --w-radius-pill:    50px;
    --w-radius-circle:  50%;

    /* ---- Shadows ---- */
    --w-shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.12);
    --w-shadow-md:      0 4px 12px rgba(0, 0, 0, 0.15);
    --w-shadow-lg:      0 10px 24px rgba(0, 0, 0, 0.2);

    /* ---- Transitions ---- */
    --w-transition-fast:    0.15s ease;
    --w-transition:         0.3s ease;
    --w-transition-slow:    0.5s ease;
}