/* ============================================================
   sportsbet365 theme — tokens.css
   Single source of truth for color/spacing/typography tokens.
   Replaces the two competing color systems in legacy style.css
   (#49a31b Bootstrap overrides + #3BC117 --cor-* Portuguese vars).
   Load order: tokens -> base -> layout -> components -> pages
   ============================================================ */

:root,
[data-bs-theme=dark] {
    color-scheme: dark;

    /* ---- Surfaces: deep blue-slate, 3 elevation steps ---- */
    --sb-bg:            #0E1220;
    --sb-surface:       #171C2E;
    --sb-surface-2:     #202741;
    --sb-surface-3:     #2A3352;
    --sb-border:        #2A3352;
    --sb-border-soft:   #222B49;

    /* ---- Brand accents ---- */
    --sb-green:         #24EE89;
    --sb-green-deep:    #10B461;
    --sb-green-soft:    rgba(36, 238, 137, .12);
    --sb-gold:          #FFC53D;
    --sb-gold-deep:     #FF9F0A;
    --sb-gold-soft:     rgba(255, 197, 61, .12);
    --sb-purple:        #8B5CF6;
    --sb-magenta:       #E14BD2;
    --sb-purple-soft:   rgba(139, 92, 246, .14);
    --sb-danger:        #FF5C5C;
    --sb-info:          #4DA3FF;

    /* ---- Gradients: the playful layer ---- */
    --sb-grad-cta:      linear-gradient(135deg, #2BF08D 0%, #10B461 100%);
    --sb-grad-gold:     linear-gradient(135deg, #FFE066 0%, #FF9F0A 100%);
    --sb-grad-promo:    linear-gradient(135deg, #8B5CF6 0%, #E14BD2 100%);
    --sb-grad-hero:     radial-gradient(120% 120% at 85% 0%, rgba(139, 92, 246, .35), transparent 55%),
                        radial-gradient(90% 90% at 10% 100%, rgba(36, 238, 137, .18), transparent 50%);
    --sb-grad-text-gold: linear-gradient(180deg, #FFE38A 0%, #FF9F0A 100%);

    /* ---- Text ---- */
    --sb-text:          #EAF0FF;
    --sb-text-muted:    #93A1C4;
    --sb-text-dim:      #5C6B8F;
    --sb-text-on-accent:#0E1220;

    /* ---- Shape ---- */
    --sb-radius-sm:     8px;
    --sb-radius:        12px;
    --sb-radius-lg:     16px;
    --sb-radius-pill:   999px;

    /* ---- Shadows / glows ---- */
    --sb-shadow-card:       0 8px 24px rgba(0, 0, 0, .35);
    --sb-shadow-raised:     0 12px 32px rgba(0, 0, 0, .45);
    --sb-glow-green:        0 0 24px rgba(36, 238, 137, .35);
    --sb-glow-gold:         0 0 24px rgba(255, 197, 61, .35);

    /* ---- Layout metrics ---- */
    --sb-header-h:      64px;
    --sb-sidebar-w:     240px;
    --sb-bottomnav-h:   62px;
    --sb-touch:         44px;

    /* ---- Motion ---- */
    --sb-ease:          cubic-bezier(.22, .9, .35, 1);
    --sb-fast:          .15s;
    --sb-med:           .25s;

    /* ============================================================
       Bootstrap 5.3 bridge — restyles every BS component for free.
       ============================================================ */
    --bs-body-bg:               var(--sb-bg);
    --bs-body-color:            var(--sb-text);
    --bs-emphasis-color:        var(--sb-text);
    --bs-secondary-color:       var(--sb-text-muted);
    --bs-secondary-bg:          var(--sb-surface);
    --bs-tertiary-color:        var(--sb-text-dim);
    --bs-tertiary-bg:           var(--sb-surface-2);
    --bs-border-color:          var(--sb-border);
    --bs-border-color-translucent: rgba(42, 51, 82, .6);
    --bs-border-radius:         var(--sb-radius-sm);
    --bs-border-radius-lg:      var(--sb-radius);
    --bs-border-radius-xl:      var(--sb-radius-lg);
    --bs-primary:               #24EE89;
    --bs-primary-rgb:           36, 238, 137;
    --bs-primary-text-emphasis: #7CF6BA;
    --bs-primary-bg-subtle:     rgba(36, 238, 137, .12);
    --bs-primary-border-subtle: rgba(36, 238, 137, .35);
    --bs-success-rgb:           36, 238, 137;
    --bs-danger:                #FF5C5C;
    --bs-danger-rgb:            255, 92, 92;
    --bs-info-rgb:              77, 163, 255;
    --bs-warning-rgb:           255, 197, 61;
    --bs-link-color:            var(--sb-green);
    --bs-link-color-rgb:        36, 238, 137;
    --bs-link-hover-color:      #5FF5A8;
    --bs-link-hover-color-rgb:  95, 245, 168;
    --bs-heading-color:         var(--sb-text);
    --bs-code-color:            var(--sb-magenta);
    --bs-highlight-bg:          var(--sb-gold-soft);
}

/* Component-level Bootstrap vars that don't inherit from root */
.modal-content {
    --bs-modal-bg: var(--sb-surface);
    --bs-modal-border-color: var(--sb-border);
    --bs-modal-header-border-color: var(--sb-border-soft);
    --bs-modal-footer-border-color: var(--sb-border-soft);
    border-radius: var(--sb-radius-lg);
}

.card {
    --bs-card-bg: var(--sb-surface);
    --bs-card-border-color: var(--sb-border-soft);
    --bs-card-cap-bg: var(--sb-surface-2);
    --bs-card-color: var(--sb-text);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--sb-surface-2);
    --bs-dropdown-color: var(--sb-text);
    --bs-dropdown-link-color: var(--sb-text);
    --bs-dropdown-link-hover-bg: var(--sb-surface-3);
    --bs-dropdown-link-hover-color: var(--sb-text);
    --bs-dropdown-link-active-bg: var(--sb-green-soft);
    --bs-dropdown-link-active-color: var(--sb-green);
    --bs-dropdown-border-color: var(--sb-border);
    box-shadow: var(--sb-shadow-raised);
}

.offcanvas {
    --bs-offcanvas-bg: var(--sb-surface);
    --bs-offcanvas-color: var(--sb-text);
    --bs-offcanvas-border-color: var(--sb-border);
}

.toast {
    --bs-toast-bg: var(--sb-surface-2);
    --bs-toast-color: var(--sb-text);
    --bs-toast-border-color: var(--sb-border);
    --bs-toast-header-bg: var(--sb-surface-3);
    --bs-toast-header-color: var(--sb-text);
}

.accordion {
    --bs-accordion-bg: var(--sb-surface);
    --bs-accordion-color: var(--sb-text);
    --bs-accordion-border-color: var(--sb-border-soft);
    --bs-accordion-btn-color: var(--sb-text);
    --bs-accordion-btn-bg: var(--sb-surface);
    --bs-accordion-active-bg: var(--sb-surface-2);
    --bs-accordion-active-color: var(--sb-green);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px var(--sb-green-soft);
}

.pagination {
    --bs-pagination-bg: var(--sb-surface);
    --bs-pagination-color: var(--sb-text-muted);
    --bs-pagination-border-color: var(--sb-border-soft);
    --bs-pagination-hover-bg: var(--sb-surface-2);
    --bs-pagination-hover-color: var(--sb-text);
    --bs-pagination-hover-border-color: var(--sb-border);
    --bs-pagination-focus-bg: var(--sb-surface-2);
    --bs-pagination-focus-color: var(--sb-text);
    --bs-pagination-focus-box-shadow: 0 0 0 3px var(--sb-green-soft);
    --bs-pagination-active-bg: var(--sb-green);
    --bs-pagination-active-border-color: var(--sb-green);
    --bs-pagination-active-color: var(--sb-text-on-accent);
    --bs-pagination-disabled-bg: var(--sb-surface);
    --bs-pagination-disabled-color: var(--sb-text-dim);
    --bs-pagination-disabled-border-color: var(--sb-border-soft);
}

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--sb-text);
    --bs-table-border-color: var(--sb-border-soft);
    --bs-table-striped-bg: rgba(32, 39, 65, .5);
    --bs-table-striped-color: var(--sb-text);
    --bs-table-hover-bg: var(--sb-surface-2);
    --bs-table-hover-color: var(--sb-text);
}