/* ===========================================================================
   Palestra — brand overrides for Acorn
   FULL REPLACEMENT for public/acorn/css/main.css

   Why the selectors look like this:
   Acorn declares its palette on html[data-color=light-blue] { ... } etc.
   That is specificity 0,1,1. A :root block is 0,1,0 and always loses, which is
   why the theme stayed blue. html[data-color^="light"] matches the same
   specificity and loads later, so it wins for ANY hue the user picks - the
   light/dark toggle still works, the hue picker simply stops mattering.
   =========================================================================== */

html[data-color^="light"] {
    /* Brand */
    --palestra-ink:       #12211C;
    --palestra-cypress:   #1E4D3B;
    --palestra-sage:      #7FA894;
    --palestra-saffron:   #E0913A;
    --palestra-limestone: #EDF0EA;
    --palestra-slate:     #46524C;

    /* Acorn palette */
    --primary:     #1E4D3B;
    --secondary:   #7FA894;
    --tertiary:    #E0913A;
    --quaternary:  #46524C;

    /* The -rgb pairs drive every rgba() in the theme. Miss these and
       translucent surfaces stay blue while solid ones turn green. */
    --primary-rgb:    30, 77, 59;
    --secondary-rgb:  127, 168, 148;
    --tertiary-rgb:   224, 145, 58;
    --quaternary-rgb: 70, 82, 76;

    --primary-darker:    #163A2C;
    --secondary-darker:  #628B76;
    --tertiary-darker:   #C57C2C;
    --quaternary-darker: #38423D;

    --body:            #46524C;
    --alternate:       #6B7872;
    --muted:           #9AA7A0;
    --separator:       #DCE3DD;
    --separator-light: #EDF1EC;

    --body-rgb:            70, 82, 76;
    --alternate-rgb:       107, 120, 114;
    --muted-rgb:           154, 167, 160;
    --separator-rgb:       220, 227, 221;
    --separator-light-rgb: 237, 241, 236;

    --background:      #F4F6F2;
    --foreground:      #FFFFFF;
    --background-rgb:  244, 246, 242;
    --foreground-rgb:  255, 255, 255;
    --background-theme: #E7EDE6;
    --background-light: #F8FAF7;

    --gradient-1: #1E4D3B;
    --gradient-2: #26604A;
    --gradient-3: #2F7358;

    --light-text: #FFFFFF;
    --dark-text:  #12211C;
}

html[data-color^="dark"] {
    --palestra-ink:       #0E1A16;
    --palestra-cypress:   #3E8A6B;
    --palestra-sage:      #7FA894;
    --palestra-saffron:   #E9A455;
    --palestra-limestone: #CBD5CE;
    --palestra-slate:     #A5B3AB;

    /* Lifted on purpose: #1E4D3B on a dark ground fails WCAG AA. */
    --primary:     #3E8A6B;
    --secondary:   #7FA894;
    --tertiary:    #E9A455;
    --quaternary:  #8A968F;

    --primary-rgb:    62, 138, 107;
    --secondary-rgb:  127, 168, 148;
    --tertiary-rgb:   233, 164, 85;
    --quaternary-rgb: 138, 150, 143;

    --primary-darker:    #326F56;
    --secondary-darker:  #628B76;
    --tertiary-darker:   #C98C42;
    --quaternary-darker: #6F7A74;

    --body:            #CBD5CE;
    --alternate:       #A5B3AB;
    --muted:           #7A8981;
    --separator:       #26362E;
    --separator-light: #1D2C25;

    --body-rgb:            203, 213, 206;
    --alternate-rgb:       165, 179, 171;
    --muted-rgb:           122, 137, 129;
    --separator-rgb:       38, 54, 46;
    --separator-light-rgb: 29, 44, 37;

    --background:      #0E1A16;
    --foreground:      #16261F;
    --background-rgb:  14, 26, 22;
    --foreground-rgb:  22, 38, 31;
    --background-theme: #0B1512;
    --background-light: #16261F;

    --gradient-1: #1E4D3B;
    --gradient-2: #2A6B52;
    --gradient-3: #3E8A6B;

    --light-text: #FFFFFF;
    --dark-text:  #0E1A16;
}

/* ---------------------------------------------------------------------------
   Logo
   Acorn scopes these as html[data-color=light-green] .logo .img (0,3,1), so a
   bare .logo .img never wins. Match it and force.
   --------------------------------------------------------------------------- */
html[data-color] .logo .img,
html[data-placement] .nav-container .logo .img {
    background-image: url('/brand/palestra-mark-light.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
}

/* Light nav bar needs the dark mark. */
html[data-navcolor="light"] .nav-container .logo .img,
html[data-color^="light"][data-navcolor="light"] .logo .img {
    background-image: url('/brand/palestra-mark.svg') !important;
}

html[data-color] .logo-default {
    background-image: url('/brand/palestra-lockup.svg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    width: 190px !important;
    min-height: 44px !important;
}

html[data-color^="dark"] .logo-default {
    background-image: url('/brand/palestra-lockup-light.svg') !important;
}

/* ---------------------------------------------------------------------------
   Saffron is an accent, not a second primary.
   One per screen, reserved for things that need attention.
   --------------------------------------------------------------------------- */
.text-accent   { color: var(--palestra-saffron) !important; }
.bg-accent     { background-color: var(--palestra-saffron) !important; }
.border-accent { border-color: var(--palestra-saffron) !important; }

.badge.bg-outline-accent {
    color: var(--palestra-saffron);
    border: 1px solid var(--palestra-saffron);
    background: transparent;
}

.btn-accent {
    background-color: var(--palestra-saffron);
    border-color: var(--palestra-saffron);
    color: #12211C;
}
.btn-accent:hover,
.btn-accent:focus {
    background-color: var(--tertiary-darker);
    border-color: var(--tertiary-darker);
    color: #12211C;
}

/* ---------------------------------------------------------------------------
   Numbers
   Money and counts must line up in columns. Proportional figures make a table
   of currency look ragged and are genuinely harder to scan.
   --------------------------------------------------------------------------- */
.cta-1, .cta-2, .cta-3,
.display-1, .display-2, .display-3, .display-4,
table td, table th,
.text-tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ---------------------------------------------------------------------------
   Surfaces
   Acorn's stock shadow is heavy for data-dense screens; softer and tinted to
   the brand reads calmer without losing separation.
   --------------------------------------------------------------------------- */
.card {
    box-shadow: 0 1px 2px rgba(18, 33, 28, 0.04),
                0 4px 12px rgba(18, 33, 28, 0.05);
}

html[data-color^="dark"] .card {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2),
                0 4px 12px rgba(0, 0, 0, 0.25);
}

/* Stat tiles that link somewhere should say so on hover. */
a.card {
    transition: transform 120ms ease, box-shadow 120ms ease;
}
a.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(18, 33, 28, 0.06),
                0 8px 20px rgba(18, 33, 28, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    a.card { transition: none; }
    a.card:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Check-in result panel — must be readable across a counter.
   --------------------------------------------------------------------------- */
.checkin-result {
    border-radius: var(--border-radius-lg, 14px);
    padding: 2rem;
    text-align: center;
}
.checkin-result.pass { background: var(--primary);          color: #FFFFFF; }
.checkin-result.warn { background: var(--palestra-saffron); color: #12211C; }
.checkin-result.deny { background: #A63D3D;                 color: #FFFFFF; }
.checkin-result .result-title { font-size: 2rem; font-weight: 700; line-height: 1.1; }

/* ---------------------------------------------------------------------------
   Status badges in the brand family.
   --------------------------------------------------------------------------- */
.badge.bg-outline-primary   { color: var(--primary);          border-color: var(--primary); }
.badge.bg-outline-secondary { color: var(--palestra-sage);    border-color: var(--palestra-sage); }
.badge.bg-outline-warning   { color: var(--palestra-saffron); border-color: var(--palestra-saffron); }