/* ============================================================================
   CourtIQ — Hitcourt Design System reskin (navy + gold).
   PURE THEME LAYER: remaps CourtIQ's CSS variables + polishes a few surfaces.
   No structural/layout changes. Loaded LAST (after app.css) so it wins.
   Consumes tavishikapoor/design-system tokens.css (vendored read-only, S4.1) as the
   single source of truth — CourtIQ's vars are DERIVED from the DS tokens, not copied.
   ========================================================================== */
@import url("/theme/css/tokens.css");

:root {
    /* CourtIQ's own palette vars — app.css component rules read these, so overriding
       them re-themes buttons, links, nav accents, focus rings, etc. Values come FROM
       the DS tokens (--brand-navy / --brand-gold / --ink / --surface-2). */
    --courtiq-green:      var(--brand-navy);       /* primary fills/nav */
    --courtiq-green-dark: var(--brand-navy-800);   /* darker navy — hovers */
    --courtiq-green-soft: var(--accent-soft);      /* pale navy tint */
    --courtiq-accent:     var(--brand-gold);       /* GOLD accent / CTA / "live" */
    --courtiq-bg:         var(--surface-2);        /* app background */
    --courtiq-ink:        var(--ink);              /* body ink */

    /* Bootstrap primary/success (CourtIQ aliases success→brand) → navy, from tokens */
    --bs-primary: var(--brand-navy); --bs-primary-rgb: 14,44,92;
    --bs-primary-text-emphasis: var(--brand-navy-800); --bs-primary-bg-subtle: var(--accent-soft); --bs-primary-border-subtle: #b9c8e2;
    --bs-success: var(--brand-navy); --bs-success-rgb: 14,44,92;
    --bs-success-text-emphasis: var(--brand-navy-800); --bs-success-bg-subtle: var(--accent-soft); --bs-success-border-subtle: #b9c8e2;
    --bs-link-color: var(--brand-navy); --bs-link-hover-color: var(--brand-navy-800);
    --bs-link-color-rgb: 14,44,92; --bs-link-hover-color-rgb: 11,35,73;
    --bs-border-radius: .625rem; --bs-border-radius-lg: 1rem;
}

body {
    font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--courtiq-bg);
    color: var(--courtiq-ink);
}

/* --- Top nav: near-black → studio navy bar, gold brand accents --- */
.navbar.bg-dark {
    background: linear-gradient(180deg, #0e2c5c 0%, #0b2349 100%) !important;
    border-bottom-color: rgba(245, 178, 30, .35) !important;
}
.navbar-dark .navbar-brand .text-success,
.navbar-dark .nav-link.text-success { color: #f5b21e !important; } /* racket + "New Match" → gold pop */
.navbar-dark .nav-link { font-weight: 500; }

/* --- Cards: DS radius + soft elevation --- */
.card {
    border: 1px solid #e4e9f2;
    border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
}
.card-header { background: #f8fafc; border-bottom-color: #eef2f9; font-weight: 600; }

/* --- Buttons: DS radius/weight; primary(=success alias) → solid navy --- */
.btn { border-radius: .625rem; font-weight: 600; }
.btn-success, .btn-primary {
    background-color: var(--courtiq-green); border-color: var(--courtiq-green);
}
.btn-success:hover, .btn-primary:hover,
.btn-success:focus, .btn-primary:focus {
    background-color: var(--courtiq-green-dark); border-color: var(--courtiq-green-dark);
}
.btn-outline-success, .btn-outline-primary { color: var(--courtiq-green); border-color: var(--courtiq-green); }
.btn-outline-success:hover, .btn-outline-primary:hover { background: var(--courtiq-green); border-color: var(--courtiq-green); color:#fff; }

/* --- Forms: DS radius + navy focus ring --- */
.form-control, .form-select { border-radius: .625rem; border-color: #d2dae7; }
.form-control:focus, .form-select:focus {
    border-color: var(--courtiq-green);
    box-shadow: 0 0 0 .2rem rgba(14,44,92,.15);
}

/* --- Badges / pills --- */
.badge.bg-success, .badge.bg-primary { background-color: var(--courtiq-green) !important; }

/* --- Gold accent helpers (for "live"/win/CTA highlights) --- */
.text-gold { color: #f5b21e !important; }
.bg-gold   { background: #f5b21e !important; color: #0e2c5c !important; }

/* --- Welcome/flash banner: pale navy instead of pale purple --- */
.alert-primary, .alert-success { background: #e8eef9; border-color: #b9c8e2; color: #0b2349; }