/* ============================================================
   THEME TOKENS
   ------------------------------------------------------------
   Colour & spacing variables consumed by all component CSS via
   var(--token-name). Layout works under any theme; only token
   values change between themes.

   Design model:
     - :root defines the SUMMER palette (default for the project).
     - .theme-winter overrides only the tokens that differ.
     - .theme-summer is a no-op (matches :root) — left in for clarity
       and so future overrides have a place to live.

   When the Figma winter palette is finalised, edit the .theme-winter
   block below. No other files need to change.
   ============================================================ */

:root {
    /* ----- Surfaces ----- */
    --color-bg:               #f3f5f4;   /* varbar, chart canvas, neutral surfaces */
    --color-surface:          #ffffff;   /* topbar, cards, default surfaces */
    --color-sidebar-bg:       #fab45b;   /* sidebar column background (summer orange) */
    --color-sidebar-item-bg:  #fbc37c;   /* sidebar button background (lighter orange) */

    /* ----- Text ----- */
    --color-text:        #1a1a1a;
    --color-text-muted:  #6c757d;

    /* ----- Brand / interactive ----- */
    --color-primary:     #fab45b;   /* active button bg in varbar / time / toggle */
    --color-on-primary:  #1a1a1a;   /* readable text colour ON the primary fill */
    --color-accent:      #fab45b;   /* aliased to primary for now */
    --color-border:      #e2e2e2;

    /* ----- Spacing scale ----- */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* ----- Layout constants ----- */
    --topbar-height:     56px;
    --varbar-height:     48px;
    --sidebar-width:     96px;
}

/* ============================================================
   WINTER OVERRIDES
   ------------------------------------------------------------
   Only the tokens that differ from :root. Unspecified tokens
   inherit the summer (default) values until Ana provides the
   full winter palette.
   ============================================================ */
.theme-winter {
    --color-sidebar-bg:       #6276ba;   /* sidebar column (blue-purple) */
    --color-sidebar-item-bg:  #8696c8;   /* placeholder — slightly lighter than column */
    --color-primary:          #6276ba;   /* active button bg follows the season */
    --color-on-primary:       #ffffff;   /* white text on the blue */
}

/* ============================================================
   SUMMER — no-op, matches :root
   ------------------------------------------------------------
   Kept as an empty selector so when summer-specific overrides
   are needed (e.g. tinting on transition), they have a home.
   ============================================================ */
.theme-summer {
    /* matches :root */
}