/* ════════════════════════════════════════════════════
   AbookFX — Theme Variables
   Brand palette: #06483D · #D7F65C · #F4F8F5
   ════════════════════════════════════════════════════ */

:root,
[data-theme="light"] {
    --clr-primary:        #06483D;
    --clr-primary-hover:  #053d34;
    --clr-accent:         #D7F65C;
    --clr-accent-hover:   #c8ee48;

    --clr-bg:             #F4F8F5;
    --clr-bg-alt:         #e8f0ea;
    --clr-surface:        #ffffff;
    --clr-surface-alt:    #f0f5f1;

    --clr-text:           #0d1f1a;
    --clr-text-muted:     #4a6660;
    --clr-border:         #ccddd5;

    --clr-nav-bg:         #06483D;
    --clr-nav-text:       #ffffff;
    --clr-nav-link:       rgba(255,255,255,0.85);
    --clr-nav-link-hover: #D7F65C;

    --clr-footer-bg:      #03302a;
    --clr-footer-text:    rgba(255,255,255,0.75);

    --clr-btn-primary-bg:   #D7F65C;
    --clr-btn-primary-text: #06483D;
    --clr-btn-outline-border: #06483D;
    --clr-btn-outline-text:   #06483D;

    --shadow-sm:  0 2px 8px rgba(6,72,61,0.08);
    --shadow-md:  0 4px 20px rgba(6,72,61,0.12);
    --shadow-lg:  0 8px 40px rgba(6,72,61,0.16);

    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  20px;

    --transition: 0.25s ease;
}

[data-theme="dark"] {
    --clr-primary:        #1a7a6a;
    --clr-primary-hover:  #21927f;
    --clr-accent:         #D7F65C;
    --clr-accent-hover:   #c8ee48;

    --clr-bg:             #0a1410;
    --clr-bg-alt:         #0f1e18;
    --clr-surface:        #132018;
    --clr-surface-alt:    #1a2d22;

    --clr-text:           #e4ede8;
    --clr-text-muted:     #7eaa95;
    --clr-border:         #1e3428;

    --clr-nav-bg:         #0d1f19;
    --clr-nav-text:       #e4ede8;
    --clr-nav-link:       rgba(228,237,232,0.8);
    --clr-nav-link-hover: #D7F65C;

    --clr-footer-bg:      #071109;
    --clr-footer-text:    rgba(228,237,232,0.65);

    --clr-btn-primary-bg:   #D7F65C;
    --clr-btn-primary-text: #06483D;
    --clr-btn-outline-border: #D7F65C;
    --clr-btn-outline-text:   #D7F65C;

    --shadow-sm:  0 2px 8px rgba(0,0,0,0.3);
    --shadow-md:  0 4px 20px rgba(0,0,0,0.4);
    --shadow-lg:  0 8px 40px rgba(0,0,0,0.5);
}

/* ── Apply globals ──────────────────────────────── */
body {
    background-color: var(--clr-bg);
    color:            var(--clr-text);
    transition:       background-color var(--transition), color var(--transition);
}

a {
    color:           var(--clr-primary);
    text-decoration: none;
    transition:      color var(--transition);
}
a:hover { color: var(--clr-primary-hover); }

/* ── Theme toggle button ────────────────────────── */
.theme-toggle-btn {
    width:            38px;
    height:           38px;
    border-radius:    50%;
    border:           2px solid var(--clr-nav-link);
    background:       transparent;
    color:            var(--clr-nav-link);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    cursor:           pointer;
    transition:       all var(--transition);
    font-size:        1rem;
    padding:          0;
}
.theme-toggle-btn:hover {
    background: var(--clr-accent);
    color:      var(--clr-primary);
    border-color: var(--clr-accent);
}