/* ============================================================
   WAEC EXAM — DESIGN SYSTEM (uniformity layer)
   One brand language for every public page. Loaded LAST on
   each page (after style.css / practice.css / leaderboard.css
   / blog-article.css) so these tokens and component rules win
   on equal specificity. It changes presentation only: no
   layout structure, no content, no behaviour.

   Brand standard (derived in AUDIT.md):
   - Primary navy   #1e40af  (newest shared layers: blog-article
     standard 2026-10-26, exam-hub, blog index; brief's brand navy)
   - Navy dark      #1e3a8a  /  Navy light #3b82f6 / Link #1d4ed8
   - Accent orange  #f36523  (style.css brand orange, logo system)
   - Font           "Plus Jakarta Sans" (style.css @import)
   - Radius         8 / 12 / 16 / 20px, pills 999px
   - Shadows        soft slate shadows (blog-article / hub recipe)
   ============================================================ */

:root {
    /* Canonical tokens */
    --wx-navy: #1e40af;
    --wx-navy-dark: #1e3a8a;
    --wx-navy-deep: #0e2348;
    --wx-navy-deep-2: #102a56;
    --wx-navy-light: #2563eb;
    --wx-sky: #3b82f6;
    --wx-link: #1d4ed8;
    --wx-navy-tint: #eff6ff;
    --wx-navy-tint-strong: #dbeafe;
    --wx-accent: #f36523;
    --wx-accent-dark: #d94e0f;
    --wx-accent-light: #ff8549;
    --wx-amber: #f59e0b;
    --wx-ink: #0f172a;
    --wx-text: #1e293b;
    --wx-body: #334155;
    --wx-muted: #64748b;
    --wx-faint: #94a3b8;
    --wx-bg: #f8fafc;
    --wx-surface: #ffffff;
    --wx-surface-soft: #f1f5f9;
    --wx-border: #e2e8f0;
    --wx-border-strong: #cbd5e1;
    --wx-success: #10b981;
    --wx-success-dark: #047857;
    --wx-danger: #dc2626;
    --wx-danger-dark: #b91c1c;
    --wx-warning: #f59e0b;
    --wx-font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    --wx-radius-sm: 8px;
    --wx-radius-md: 12px;
    --wx-radius-lg: 16px;
    --wx-radius-xl: 20px;
    --wx-radius-pill: 999px;
    --wx-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --wx-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --wx-shadow-lg: 0 12px 28px rgba(30, 58, 138, 0.10);
    --wx-shadow-navy: 0 14px 26px rgba(30, 64, 175, 0.28);
    --wx-shadow-accent: 0 14px 26px rgba(243, 101, 35, 0.28);
    --wx-transition: 180ms ease;

    /* Legacy aliases — every older token name now points at the
       canonical palette, so var()-based rules repaint brand-true
       without editing each legacy stylesheet. */
    --primary: var(--wx-navy);
    --primary-color: var(--wx-navy);
    --primary-dark: var(--wx-navy-dark);
    --primary-light: var(--wx-navy-light);
    --secondary: var(--wx-accent);
    --secondary-color: var(--wx-accent);
    --secondary-dark: var(--wx-accent-dark);
    --secondary-light: var(--wx-accent-light);
    --success: var(--wx-success);
    --danger: var(--wx-danger);
    --warning: var(--wx-warning);
    --neutral: var(--wx-muted);
    --bg-primary: var(--wx-surface);
    --bg-secondary: var(--wx-bg);
    --bg-tertiary: var(--wx-surface-soft);
    --text-primary: var(--wx-ink);
    --text-secondary: var(--wx-body);
    --text-light: var(--wx-faint);
    --border-color: var(--wx-border);
    --shadow-sm: var(--wx-shadow-sm);
    --shadow-md: var(--wx-shadow-md);
    --shadow-lg: var(--wx-shadow-lg);
    --radius-sm: var(--wx-radius-sm);
    --radius-md: var(--wx-radius-md);
    --radius-lg: var(--wx-radius-lg);
    --ui-accent: var(--wx-navy);
    --ui-accent-strong: var(--wx-navy-dark);
    --ui-glow: var(--wx-accent);
    --ui-ink: var(--wx-ink);
    --ui-muted: var(--wx-muted);
    --ui-bg: #f4f7fb;
    --ui-surface: var(--wx-surface);
    --ui-surface-soft: var(--wx-bg);
    --ui-border: #dbe4f0;
    --brand-primary: var(--wx-navy);
    --brand-primary-hover: var(--wx-navy-dark);
    --brand-tint: var(--wx-navy-tint);
    --brand-navy: var(--wx-navy-dark);
}

/* Practice shell tokens live on the body element, so re-point
   them there as well (practice.css defines them on
   body[data-practice-layout]). Dark variant keeps a lighter
   navy for contrast on dark surfaces. */
body[data-practice-layout] {
    --brand-primary: var(--wx-navy);
    --brand-primary-hover: var(--wx-navy-dark);
    --brand-tint: var(--wx-navy-tint);
    --border-focus: var(--wx-navy-light);
}
.dark body[data-practice-layout] {
    --brand-primary: var(--wx-navy-light);
    --brand-primary-hover: var(--wx-navy);
}

/* Leaderboard tokens live on .leaderboard-page. */
.leaderboard-page {
    --brand-navy: var(--wx-navy-dark);
    --brand-indigo-grad: linear-gradient(135deg, var(--wx-navy-dark) 0%, var(--wx-navy) 100%);
    --cta-orange-grad: linear-gradient(135deg, var(--wx-accent) 0%, var(--wx-accent-light) 100%);
    --cta-orange-hover: linear-gradient(135deg, var(--wx-accent-dark) 0%, var(--wx-accent) 100%);
}

/* ---------- Base typography ---------- */
body {
    font-family: var(--wx-font);
    color: var(--wx-text);
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--wx-font);
    color: var(--wx-ink);
    letter-spacing: -0.01em;
}
/* Practice page: its inline layer set headings to 'Fraunces',
   a font that is never loaded. Inherit the brand font instead. */
body[data-practice-layout] :is(h1, h2, h3, .font-bold) {
    font-family: var(--wx-font);
}
::selection { background: rgba(30, 64, 175, 0.18); }
:focus-visible {
    outline: 3px solid var(--wx-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---------- Header / navigation (one treatment everywhere) ---------- */
.navbar {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--wx-border);
    box-shadow: var(--wx-shadow-sm);
    backdrop-filter: blur(10px);
}
.nav-link {
    color: var(--wx-body);
    font-weight: 600;
    border-radius: var(--wx-radius-pill);
}
.nav-link:hover { color: var(--wx-navy); background: var(--wx-navy-tint); }
.nav-link.active, .nav-link[aria-current="page"] {
    color: var(--wx-navy);
    background: var(--wx-navy-tint);
}
.nav-auth-link.signup,
.nav-auth-link.dashboard {
    background: var(--wx-navy);
    color: #ffffff;
    border-radius: var(--wx-radius-sm);
}
.nav-auth-link.signup:hover,
.nav-auth-link.dashboard:hover { background: var(--wx-navy-dark); }

/* ---------- One button system ---------- */
.btn,
button.btn {
    border-radius: var(--wx-radius-md);
    min-height: 48px;
    font-family: var(--wx-font);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    transition: transform var(--wx-transition), box-shadow var(--wx-transition),
        background-color var(--wx-transition), border-color var(--wx-transition),
        color var(--wx-transition);
}
.btn-primary {
    background: var(--wx-navy);
    background-image: none;
    color: #ffffff;
    border: 2px solid var(--wx-navy);
}
.btn-primary:hover:not(:disabled) {
    background: var(--wx-navy-dark);
    border-color: var(--wx-navy-dark);
    box-shadow: var(--wx-shadow-md);
    transform: translateY(-2px);
}
.btn-secondary {
    background: var(--wx-surface);
    color: var(--wx-text);
    border: 2px solid var(--wx-border);
}
.btn-secondary:hover:not(:disabled) {
    border-color: var(--wx-navy);
    color: var(--wx-navy);
    background: var(--wx-navy-tint);
}
.btn-outline {
    background: transparent;
    color: var(--wx-navy);
    border: 2px solid var(--wx-navy);
}
.btn-outline:hover:not(:disabled) {
    background: var(--wx-navy);
    color: #ffffff;
}
.btn-danger {
    background: var(--wx-danger);
    border-color: var(--wx-danger);
    color: #ffffff;
}
.btn-danger:hover:not(:disabled) { background: var(--wx-danger-dark); }
.btn-success {
    background: var(--wx-success);
    background-image: none;
    border-color: var(--wx-success);
    color: #ffffff;
}
.btn-success:hover:not(:disabled) { background: var(--wx-success-dark); }
.btn-warning {
    background: var(--wx-warning);
    background-image: none;
    border-color: var(--wx-warning);
    color: #ffffff;
}
.btn-google {
    background: var(--wx-surface);
    color: var(--wx-text);
    border: 2px solid var(--wx-border);
    border-radius: var(--wx-radius-md);
}
.btn-google:hover { border-color: var(--wx-navy); box-shadow: var(--wx-shadow-md); }
/* The challenge CTA used an off-brand purple gradient
   (#667eea -> #764ba2). It is a primary CTA: navy now. */
.btn-challenge {
    background: var(--wx-navy);
    background-image: linear-gradient(135deg, var(--wx-navy) 0%, var(--wx-navy-dark) 100%);
    border-radius: var(--wx-radius-md);
}
.btn-challenge:hover { box-shadow: var(--wx-shadow-navy); }

/* Homepage hero CTAs join the same system: navy primary,
   orange JAMB, white outline secondary — same radius, same
   shadow language as .btn-primary / .btn on every other page. */
.wx-hero-btn-primary,
.wx-hero-btn-jamb,
.wx-hero-btn-secondary {
    border-radius: var(--wx-radius-md);
    font-family: var(--wx-font);
}
.wx-hero-btn-primary {
    background: var(--wx-navy);
    background-image: linear-gradient(135deg, var(--wx-navy) 0%, var(--wx-navy-light) 100%);
    color: #ffffff;
    box-shadow: var(--wx-shadow-navy);
}
.wx-hero-btn-jamb {
    background: var(--wx-accent);
    background-image: linear-gradient(135deg, var(--wx-accent) 0%, var(--wx-accent-light) 100%);
    color: #ffffff;
    box-shadow: var(--wx-shadow-accent);
}
.wx-hero-btn-secondary {
    background: var(--wx-surface);
    color: var(--wx-ink);
    border: 2px solid var(--wx-border);
}
.btn-hero-primary, .btn-hero-secondary, .btn-hero-jamb, .btn-hero-waec, .btn-hero-ghost {
    border-radius: var(--wx-radius-md);
}

/* Blog index + article CTAs (their inline styles used the same
   navy family but a different orange, #f97316). */
.blog-cta-primary {
    background: var(--wx-accent);
    border-radius: var(--wx-radius-pill);
}
.blog-cta-band, .cta-strip {
    background: var(--wx-navy-dark);
    background-image: linear-gradient(135deg, var(--wx-navy-dark) 0%, var(--wx-navy) 100%);
    border-radius: var(--wx-radius-xl);
}
.blog-empty-reset {
    background: var(--wx-navy);
    border-radius: var(--wx-radius-pill);
}
.category-tag:hover, .category-tag.active {
    background: var(--wx-navy-light);
    border-color: var(--wx-navy-light);
}

/* Exam hub tabs already use the brand navy when active. */
.wx-hub-tab.active {
    background: var(--wx-navy);
    border-color: var(--wx-navy);
}

/* Practice shell buttons join the radius/shadow language. */
.practice-button { border-radius: var(--wx-radius-sm); }
.practice-primary {
    background: var(--wx-navy);
    border-color: var(--wx-navy);
    color: #ffffff;
}
.practice-primary:hover:not(:disabled) {
    background: var(--wx-navy-dark);
    border-color: var(--wx-navy-dark);
}
.dark .practice-primary { background: var(--wx-navy-light); border-color: var(--wx-navy-light); }

/* ---------- Cards & surfaces ---------- */
.feature-card, .subject-card, .question-card,
.blog-card, .wx-hub-card, .blog-path-card, .blog-faq-item {
    border: 1px solid var(--wx-border);
    border-radius: var(--wx-radius-lg);
    box-shadow: var(--wx-shadow-sm);
    background: var(--wx-surface);
}
.blog-card { border-radius: var(--wx-radius-xl); }
.blog-card:hover {
    border-color: var(--wx-navy-light);
    box-shadow: var(--wx-shadow-lg);
}

/* ---------- Footer (one treatment everywhere) ---------- */
.site-footer, .footer {
    background: linear-gradient(180deg, var(--wx-navy-deep) 0%, var(--wx-navy-deep-2) 100%);
    color: #dbeafe;
}
.site-footer .footer-col-title { color: #ffffff; }
.footer-newsletter-btn {
    background: var(--wx-accent);
    border-radius: var(--wx-radius-sm);
    font-weight: 700;
}
.footer-newsletter-btn:hover { background: var(--wx-accent-dark); }

/* ---------- Forms ---------- */
input, select, textarea {
    font-family: var(--wx-font);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--wx-navy-light);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12);
    outline: none;
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}