:root, body.light, body.dark {
    --rosary-blue: #042c53;
    /* --rosary-blue-dark: #032342;
    --rosary-blue-light: #365675; */
    --rosary-gold: #f3be40;
    --off-white: #fefdf9;
    /* --streak-blue: #276fbf;
    --gray: #d3d3d3; */

    /* ─── BeerCSS tokens (Material-3 naming) ────────────────────────────── */
    /* 1️⃣  PRIMARY family: buttons, sliders, checkboxes, fab  */
    --primary              : var(--rosary-gold);
    --on-primary           : var(--rosary-blue);   /* readable on gold   */
    --primary-container    : color-mix(in srgb, var(--rosary-gold) 80%, white);
    --on-primary-container : var(--rosary-blue);

    /* 2️⃣  SECONDARY family: chips, outlined buttons, subtle accents      */
    /*      Use a desaturated *tint* of the gold so it harmonises          */
    --secondary            : color-mix(in srgb, var(--rosary-gold) 50%, var(--rosary-blue));
    --on-secondary         : var(--off-white);
    --secondary-container  : color-mix(in srgb, var(--secondary) 30%, black);
    --on-secondary-container : var(--off-white);

    /* 3️⃣  TERTIARY family: optional contrasting accent (soft teal here) */
    --tertiary             : #3ba4b0;
    --on-tertiary          : var(--off-white);
    --tertiary-container   : color-mix(in srgb, #3ba4b0 85%, white);
    --on-tertiary-container: #00282e;

    /* 4️⃣  ERROR colors – keep BeerCSS defaults or match brand red        */
    --error                : #ffb4ab;
    --on-error             : #690005;
    --error-container      : #93000a;
    --on-error-container   : #ffb4ab;

    /* 5️⃣  SURFACE & BACKGROUND hierarchy (dark scheme)                   */
    --background                : var(--rosary-blue);  /* page bg          */
    --on-background             : var(--off-white);    /* body text        */

    /* Surfaces: progressively lighter tints of the background           */
    --surface                   : color-mix(in srgb, var(--rosary-blue) 85%, black);
    --surface-dim               : color-mix(in srgb, var(--rosary-blue) 92%, black);
    --surface-bright            : color-mix(in srgb, var(--rosary-blue) 70%, white);

    --surface-container-lowest  : color-mix(in srgb, var(--rosary-blue) 94%, black);
    --surface-container-low     : color-mix(in srgb, var(--rosary-blue) 90%, black);
    --surface-container         : color-mix(in srgb, var(--rosary-blue) 85%, black);
    --surface-container-high    : color-mix(in srgb, var(--rosary-blue) 78%, black);
    --surface-container-highest : color-mix(in srgb, var(--rosary-blue) 70%, black);

    --on-surface                : var(--off-white);
    --surface-variant           : color-mix(in srgb, var(--rosary-blue) 65%, white);
    --on-surface-variant        : color-mix(in srgb, var(--off-white) 70%, var(--rosary-blue));

    /* 6️⃣  OUTLINES, SHADOWS & INVERSE                                   */
    --outline                : color-mix(in srgb, var(--off-white) 30%, var(--rosary-blue));
    --outline-variant        : color-mix(in srgb, var(--outline) 60%, var(--rosary-blue));

    --shadow                 : #000000;
    --scrim                  : #00000040; /* 25 % black transparency    */

    --inverse-surface        : var(--off-white);
    --inverse-on-surface     : var(--rosary-blue);
    --inverse-primary        : color-mix(in srgb, var(--rosary-gold) 40%, var(--rosary-blue));

    --elevate1: 0;
    --elevate2: 0;
    --elevate3: 0;
}

/* Alpine.js x-cloak: hide elements until Alpine initializes */
[x-cloak] {
    display: none !important;
}