/*
 * AquaReader Branding System — Design Token Layer
 *
 * Color palette extracted from the Aqua character:
 *   Hair:    #5BC8F5  (ice blue — primary brand)
 *   Eyes:    #2276C4  (deep blue — primary dark)
 *   Gauntlets/clip: #F0A500  (gold — accent)
 *   Brooch:  #10B981  (teal — secondary accent)
 *   Outfit:  #1B2B5E  (deep navy)
 *   White:   #FFFFFF  (background, clean areas)
 *
 * This file only sets custom properties on :root.
 * No visual rules here — component files consume these tokens.
 *
 * @package MadaraChild
 */

:root {
    /* ── Core palette ──────────────────────────────────────────── */
    --aqua-blue:          #5BC8F5;
    --aqua-blue-light:    #8DDDF9;
    --aqua-blue-dim:      rgba(91, 200, 245, 0.15);
    --aqua-blue-hover:    #4ABBE9;

    /* ── Dual-tone Aqua primary ─────────────────────────────────── */
    --aqua-primary-dark:  #005F99;
    --aqua-primary-light: #48CAE4;
    --aqua-glow:          rgba(72, 202, 228, 0.35);
    --aqua-glow-text:     rgba(72, 202, 228, 0.5);

    --aqua-navy:          #080808;
    --aqua-navy-2:        #0e1019;
    --aqua-surface:       #141620;
    --aqua-surface-2:     #1a1d2e;
    --aqua-surface-3:     #22263a;
    --aqua-border:        rgba(91, 200, 245, 0.12);
    --aqua-border-strong: rgba(91, 200, 245, 0.28);

    --aqua-gold:          #F0A500;
    --aqua-gold-dim:      rgba(240, 165, 0, 0.15);
    --aqua-teal:          #10B981;
    --aqua-teal-dim:      rgba(16, 185, 129, 0.15);
    --aqua-red:           #e63946;   /* CTA / continue-reading */

    /* ── Text ───────────────────────────────────────────────────── */
    --aqua-text:          #e8eaf2;
    --aqua-text-muted:    rgba(232, 234, 242, 0.55);
    --aqua-text-faint:    rgba(232, 234, 242, 0.35);

    /* ── Semantic aliases ───────────────────────────────────────── */
    --aqua-primary:       var(--aqua-primary-dark);
    --aqua-primary-hover: #0077bb;
    --aqua-bg:            var(--aqua-navy);
    --aqua-card-bg:       var(--aqua-surface);
    --aqua-card-bg-hover: var(--aqua-surface-2);

    /* ── Surface aliases (homepage components) ────────────────────── */
    --surface-1:          #080808;
    --surface-2:          #0f0f0f;

    /* ── Header ─────────────────────────────────────────────────── */
    --aqua-header-bg:     rgba(11, 13, 20, 0.97);
    --aqua-header-height: 58px;
    --aqua-header-border: rgba(91, 200, 245, 0.10);

    /* ── Spacing ─────────────────────────────────────────────────── */
    --aqua-radius-sm:  4px;
    --aqua-radius-md:  8px;
    --aqua-radius-lg:  12px;
    --aqua-radius-xl:  16px;
    --aqua-radius-pill: 999px;

    /* ── Typography ─────────────────────────────────────────────── */
    --aqua-font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --aqua-font-mono:  'JetBrains Mono', 'Fira Code', monospace;

    /* ── Transitions ─────────────────────────────────────────────── */
    --aqua-ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --aqua-trans-fast: 150ms var(--aqua-ease);
    --aqua-trans-med:  250ms var(--aqua-ease);
    --aqua-trans-slow: 380ms var(--aqua-ease);

    /* ── Z-index scale ───────────────────────────────────────────── */
    --aqua-z-header:  1000;
    --aqua-z-drawer:  1100;
    --aqua-z-overlay: 1050;
    --aqua-z-topbar:  900;
    --aqua-z-bottombar: 900;
}

/* ── Global dark-theme overrides ─────────────────────────────────────
   Override Madara's light defaults without touching core files.
   All scoped to body so specificity beats Madara's generic selectors.
──────────────────────────────────────────────────────────────────── */
body {
    background-color: var(--aqua-navy) !important;
    color: var(--aqua-text);
    font-family: var(--aqua-font-sans);
}

/* Madara's .wrap and content area backgrounds */
.wrap,
.body-wrap,
.site-content,
.c-content,
.c-main {
    background-color: var(--aqua-navy) !important;
}

/* Madara secondary nav — hidden; replaced by single AquaReader header */
#secondaryNav,
.c-sub-header,
.second-nav,
.main-menu-search,
nav.second-navigation {
    display: none !important;
}

/* Madara breadcrumb */
.c-breadcrumb {
    background: var(--aqua-surface) !important;
    border-bottom: 1px solid var(--aqua-border);
}

.c-breadcrumb .breadcrumb a,
.c-breadcrumb .breadcrumb span {
    color: var(--aqua-text-muted) !important;
}

/* Card backgrounds */
.c-image-hover,
.manga-widget,
.c-card {
    background: var(--aqua-surface) !important;
    border-color: var(--aqua-border) !important;
}

/* ── Utility classes ─────────────────────────────────────────────── */
.aqua-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: var(--aqua-radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--aqua-trans-fast), color var(--aqua-trans-fast), border-color var(--aqua-trans-fast);
    cursor: pointer;
    border: 1.5px solid transparent;
    line-height: 1;
}

.aqua-btn--primary {
    background: var(--aqua-primary-dark);
    color: #ffffff;
    border-color: var(--aqua-primary-dark);
    box-shadow: 0 0 12px var(--aqua-glow);
}
.aqua-btn--primary:hover {
    background: var(--aqua-primary-hover);
    border-color: var(--aqua-primary-hover);
    color: #ffffff;
    text-decoration: none;
    box-shadow: 0 0 18px var(--aqua-glow);
}

.aqua-btn--ghost {
    background: transparent;
    color: var(--aqua-primary-light);
    border-color: var(--aqua-primary-light);
}
.aqua-btn--ghost:hover {
    background: rgba(72, 202, 228, 0.1);
    border-color: var(--aqua-primary-light);
    color: var(--aqua-primary-light);
    text-decoration: none;
    box-shadow: 0 0 10px var(--aqua-glow);
}

.aqua-btn--full {
    width: 100%;
    justify-content: center;
}