/* ==========================================================================
   WorkSocial Design Tokens
   Single source of truth for all colors, spacing, radii, and typography.
   Reference: Design Plan v2 — Ideate Phase (Color Token System)
   ========================================================================== */

:root {
    /* --- Brand Colors --- */
    --ws-orange:        #E05E0F;
    --ws-orange-lite:   #FF7F3F;
    --ws-orange-dark:   #B84A08;
    --ws-orange-ghost:  rgba(224, 94, 15, 0.08);

    /* --- Ink / Text --- */
    --ws-ink:           #141414;
    --ws-ink-mid:       #3A3A3A;
    --ws-ink-soft:      #717171;

    /* --- Backgrounds --- */
    --ws-sand:          #F6F2ED;
    --ws-cream:         #FDFAF7;
    --ws-white:         #FFFFFF;

    /* --- Legacy (header, footer) --- */
    --ws-navy:          #0b1f46;
    --ws-gray-cta:      rgba(65, 95, 107, 0.8);

    /* --- Borders --- */
    --ws-border:        rgba(20, 20, 20, 0.08);
    --ws-border-light:  #e3e3e3;

    /* --- Border Radius --- */
    --ws-radius-sm:     8px;
    --ws-radius:        12px;
    --ws-radius-lg:     16px;
    --ws-radius-xl:     24px;
    --ws-radius-pill:   100px;
    --ws-radius-circle: 50%;

    /* --- Spacing (base 8px grid) --- */
    --ws-space-xs:      4px;
    --ws-space-sm:      8px;
    --ws-space-md:      16px;
    --ws-space-lg:      24px;
    --ws-space-xl:      32px;
    --ws-space-2xl:     48px;
    --ws-space-3xl:     64px;
    --ws-space-4xl:     96px;

    /* --- Typography --- */
    --ws-font-heading:  'Montserrat', sans-serif;
    --ws-font-body:     'Lato', sans-serif;

    /* --- Shadows --- */
    --ws-shadow-sm:     0 2px 12px rgba(0, 0, 0, 0.06);
    --ws-shadow-md:     0 8px 32px rgba(0, 0, 0, 0.09);
    --ws-shadow-lg:     0 24px 64px rgba(0, 0, 0, 0.12);

    /* --- Transitions --- */
    --ws-ease:          0.25s ease;
    --ws-ease-fast:     0.15s ease;

    /* --- Pricing Icons --- */
    --ws-icon-hourly:   "\23F1";  /* ⏱ */
    --ws-icon-daily:    "\2600";  /* ☀ */
}