/* ── Theme variables ─────────────────────────────────────────────────────────
   Single source of truth for colors, radii, and other design tokens.
   Imported by style.css; available on every page that links style.css.
   ────────────────────────────────────────────────────────────────────────── */

:root {
    /* Colors — light mode */
    --bg:           #F4F0F4;
    --surface:      #ffffff;
    --text:         #333333;
    --text-muted:   #666666;
    --accent:       #8A7B9F;
    --accent-soft:  #b0a0c4;
    --header-bg:    #8A7B9F;
    --header-text:  #ffffff;
    --border:       rgba(0,0,0,0.1);
    --shadow:       rgba(0,0,0,0.12);
    --nav-text:     #555555;
    --nav-hover:    #8A7B9F;

    /* Layout */
    --nav-edge:     20px;

    /* Radii */
    --pill-radius:       5px;   /* util chips, zip chips, tab buttons */
    --title-btn-radius:  15px;  /* nav-pill, attractor UI buttons */

    /* Image presentation */
    --card-img-size: 85%;
    --card-img-dim:  0;    /* 0 = fully visible, 1 = fully hidden */
}

body.dark {
    --bg:           #100f1a;
    --surface:      #1c1b2a;
    --text:         #e8e4f0;
    --text-muted:   #9b96ae;
    --accent:       #9b8bbb;
    --accent-soft:  #7b6e9a;
    --header-bg:    #1e1b2e;
    --header-text:  #e8e4f0;
    --border:       rgba(155,139,187,0.2);
    --shadow:       rgba(0,0,0,0.4);
    --nav-text:     #9b96ae;
    --nav-hover:    #c4b8d8;
}