/* WombatEx design tokens. Every colour/radius/shadow used anywhere on the site
   should reference one of these, not a hardcoded literal — the whole point is
   that as the site grows (more pages, more app cards), new CSS reuses what
   already exists instead of quietly inventing a fourth near-identical grey.
   Audit with: node scripts/codewombat/wombat-token-audit.js */

:root {
    /* Colour */
    --wx-color-bg:            #f4f1ec;
    --wx-color-text:          #2a2420;
    --wx-color-text-muted:    #4a4038; /* was two near-identical greys (#4a4038 + #5a5048) before consolidating */
    --wx-color-text-faint:    #8a8074;
    --wx-color-border:        #e4ddd2;
    --wx-color-accent:        #a05a2c;
    --wx-color-accent-soft:   #f0e3d6; /* pale tint of --wx-color-accent - soft emphasis backgrounds (table headers etc.), not a new unrelated colour */
    --wx-color-card-bg:       #ffffff;

    /* Status badges - three deliberately distinct categories, not accidental duplicates */
    --wx-color-status-live-bg:        #eef0e4;
    --wx-color-status-live-text:      #5a6b3f;
    --wx-color-status-progress-bg:    #f3ead6;
    --wx-color-status-progress-text:  #8a6a2a;
    --wx-color-status-platform-bg:    #eae4f3;
    --wx-color-status-platform-text:  #5f4a8a;

    /* Shadow */
    --wx-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --wx-shadow-md: 0 6px 16px rgba(0, 0, 0, 0.08);
    --wx-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* Radius */
    --wx-radius-hero: 16px;
    --wx-radius-card: 14px;
    --wx-radius-pill: 20px;
}