/* variables.css */

:root {
    /* ── Base palette ── */
    --surface:     #f7f7f8;
    --card:        #fff;
    --border:      #e8e8ec;
    --text:        #1a1a22;
    --muted:       #8a8a9a;
    --tag-bg:      #f0f0f5;
    --tag-text:    #5a5a72;
    --radius:      10px;
    --danger:      #e05656;
    --success:     #3fa668;

    /* ── Site accent (default, overridden per-theme below) ── */
    --accent:      #e58fad;
    --accent-dim:  #c26f8c;

    /* ── Gender colors — used app-wide for boy/girl/both ── */
    --boy:         #5b8dd6;
    --boy-dim:     #4570ad;
    --girl:        #e58fad;
    --girl-dim:    #c26f8c;
    --both:        #6bbf8a;
    --both-dim:    #4f9c6c;
}

/* Theme wrapper classes — put on a container div per-page based on
   the gender selection carried in the query string */
.theme-boy  { --accent: var(--boy);  --accent-dim: var(--boy-dim); }
.theme-girl { --accent: var(--girl); --accent-dim: var(--girl-dim); }
.theme-both { --accent: var(--both); --accent-dim: var(--both-dim); }

/* END variables.css */