/* ==========================================================================
   Design Tokens — single authoritative :root for the entire site.
   All other CSS files consume these variables; none define their own :root.
   ========================================================================== */
:root {
    /* --- Brand colors ---------------------------------------------------- */
    --color-primary:              #082346;
    --color-primary-soft:         #f3f7fc;
    --color-accent:               #cfdaea;
    --color-light:                #edf2f8;
    --color-highlight:            #dce8f6;

    /* --- State / role tints ---------------------------------------------- */
    --color-admin-mode:           #e6edfa;
    --color-admin-user:           #edebb2;
    --color-dark-bg:              #222;

    /* --- Text & links ---------------------------------------------------- */
    --color-text:                 #101d30;
    --color-link:                 #0d3f73;
    --color-hover-link-text:      #072746;
    --color-muted:                #5c6d80;
    --color-on-dark:              #fff;

    /* --- Interactive states ---------------------------------------------- */
    --color-focus:                #d06d00;
    --color-filter-active:        #c35f00;
    --color-filter-active-hover:  #974700;

    /* --- Surfaces & borders ---------------------------------------------- */
    --color-surface:              rgba(255, 255, 255, 0.94);
    --color-surface-alt:          #f8fbff;
    --color-border:               rgba(24, 42, 64, 0.12);
    --color-border-strong:        rgba(24, 42, 64, 0.2);

    /* --- Border radius --------------------------------------------------- */
    --radius-sm:                  4px;
    --radius-md:                  7px;
    --radius-lg:                  11px;
    --radius-pill:                999px;

    /* --- Spacing scale --------------------------------------------------- */
    --space-1:                    0.35rem;
    --space-2:                    0.55rem;
    --space-3:                    0.8rem;
    --space-4:                    1rem;
    --space-5:                    1.25rem;

    /* --- Type scale ------------------------------------------------------ */
    --text-xs:                    0.78rem;
    --text-sm:                    0.92rem;
    --text-md:                    1rem;
    --text-lg:                    1.18rem;
    --text-xl:                    clamp(1.5rem, 3vw, 2.3rem);

    /* --- Misc components ------------------------------------------------- */
    --control-height:             44px;
    --transition-speed:           0.2s;
    --font-main:                  Arial, Helvetica, sans-serif;
    --top-chrome-height:          188px;

    /* --- Data chip palette ----------------------------------------------- */
    --chip-earth-border:          rgba(113, 91, 63, 0.2);
    --chip-earth-color:           #574733;
    --chip-earth-bg:              #f2eadf;

    --chip-brand-border:          rgba(80, 96, 80, 0.2);
    --chip-brand-color:           #374636;
    --chip-brand-bg:              #edf1e7;

    --chip-filter-hover-bg:       #e8dece;
    --chip-filter-active-bg:      #6b5a42;
    --chip-filter-active-hover-bg:#584936;

    --chip-filter-brand-active-bg:      #5d684f;
    --chip-filter-brand-active-hover-bg:#4d5841;

    --chip-sale-border:           rgba(117, 74, 61, 0.24);
    --chip-sale-color:            #613d35;
    --chip-sale-bg:               #f4e2da;

    --chip-sale-active-border:    rgba(91, 101, 69, 0.28);
    --chip-sale-active-color:     #3f4a31;
    --chip-sale-active-bg:        #e7eddc;

    --chip-warning-border:        rgba(133, 109, 48, 0.22);
    --chip-warning-color:         #5b4d25;
    --chip-warning-bg:            #f4efd9;

    --chip-danger-border:         rgba(126, 72, 62, 0.22);
    --chip-danger-color:          #653d36;
    --chip-danger-bg:             #f3e5df;
}