/* ===============================
   DEFAULT THEME — LIGHT MODE
   Defines all structural colour variables for the light (default) appearance.
   These are overridden by dark-theme.css when html.dark-mode is active.
   Accent/brand colours live in the per-colour theme files (red.css, blue.css, etc.)
   =============================== */

:root {
    /* --- Backgrounds: structural --- */
    --bg-body:          #4d4d4d;
    --bg-main:          #fefefe;
    --bg-page:          #f7f7f7;

    /* --- Backgrounds: sidebar / nav / footer --- */
    --bg-sidebar:       #333333;
    --bg-nav-item:      rgba(48, 48, 48, 0.6);
    --bg-nav-hover:     rgba(54, 54, 54, 0.1);
    --bg-nav-current:   #363636;
    --bg-footer:        rgba(48, 48, 48, 0.6);
    --bg-pageheader:    #333333;

    /* --- Backgrounds: content surfaces --- */
    --bg-card:          #fefefe;
    --bg-card-assets:   #fafafa;
    --bg-details:       #ffffff;
    --bg-list-item:     #fdfdfd;
    --bg-callout:       #f9f5f4;
    --bg-login-form:    #ffffff;

    /* --- Backgrounds: utility colour classes --- */
    --bg-color-1:       #fcfcfc;
    --bg-color-2:       #f7f7f7;
    --bg-color-3:       #2c2c2d;
    --bg-color-4:       #000000;

    /* --- Text --- */
    --text-body:        #333333;
    --text-heading:     #333333;
    --text-nav:         #cccccc;
    --text-nav-hover:   #f7f7f7;
    --text-muted:       #8e8e8e;
    --text-color-3:     #ffffff;

    /* --- Borders --- */
    --border-section:   #cccccc;
    --border-card:      #dde3e9;
    --border-price:     #eeeeee;

    /* --- Shadows --- */
    --shadow-card:      #cccccc;
    --shadow-dropdown:  rgba(0, 0, 0, 0.10);
}