/* ============================================================
   AMPS — Global Theme Variables
   Edit ONLY the :root block below to change colors site-wide.
   ============================================================ */

:root {
    /* ── Primary Colors ── */
    --color-deep-maroon:    #3D1010;   /* Headers, navbars, footers        */
    --color-champagne:      #D4A847;   /* Highlights, award accents        */
    --color-warm-amber:     #B85C1A;   /* CTA buttons, links               */

    /* ── Secondary Colors ── */
    --color-medium-maroon:  #8B2E2E;   /* Sub-headings, dividers           */
    --color-cream:          #FBF6EE;   /* Page backgrounds                 */
    --color-dark-brown:     #2C1A1A;   /* Body text                        */
    --color-warm-taupe:     #A08060;   /* Captions, borders                */
    --color-white:          #FFFFFF;   /* Cards, panels                    */

    /* ── Derived / utility tokens ── */
    --color-footer-bg:      var(--color-deep-maroon);
    --color-footer-copy-bg: #1a0808;
    --color-nav-text:       var(--color-dark-brown);
    --color-heading:        var(--color-deep-maroon);
    --color-link:           var(--color-warm-amber);
    --color-btn-primary-bg: var(--color-warm-amber);
    --color-btn-primary-text: var(--color-white);
    --color-breadcrumb-bg:  var(--color-warm-amber);
    --color-table-border:   var(--color-warm-amber);
    --color-table-stripe:   var(--color-cream);
    --color-scrollbar-thumb:var(--color-medium-maroon);
    --color-selection-bg:   rgba(139,46,46,0.2);
    --color-focus-ring:     rgba(139,46,46,0.5);
}

/* ── Global resets using theme tokens ── */

::selection {
    background: var(--color-selection-bg);
    color: var(--color-dark-brown);
}

::-webkit-scrollbar {
    width: 0px;
    display: none;
}

::-webkit-scrollbar-track {
    background: var(--color-cream);
}

::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-deep-maroon);
}

:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.card-amps {
    border: 1px solid var(--color-warm-taupe);
}