/**
 * Design tokens — Bibelleseplan
 * Dark (default): iOS Dark  |  Light: iOS / Material You
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Dark mode (default) ─────────────────────────────────── */
:root {
    /* Surfaces */
    --bg-primary:   #000000;
    --bg-secondary: #1c1c1e;
    --bg-tertiary:  #2c2c2e;
    --bg-elevated:  #3a3a3c;
    --bg-hover:     rgba(255, 255, 255, 0.07);
    --bg-input:     #2c2c2e;
    --bg-blur:      rgba(18, 18, 20, 0.88);

    /* Text */
    --text-primary:   #ffffff;
    --text-secondary: rgba(235, 235, 245, 0.60);
    --text-muted:     rgba(235, 235, 245, 0.32);

    /* Accent — iOS Blue (dark) */
    --accent:      #0a84ff;
    --accent-hover: #409cff;
    --accent-glow:  rgba(10, 132, 255, 0.22);

    /* System colours */
    --color-red:    #ff453a;
    --color-green:  #32d74b;
    --color-orange: #ff9f0a;

    /* Structure */
    --border:    rgba(255, 255, 255, 0.10);
    --separator: rgba(255, 255, 255, 0.07);

    /* Elevation */
    --shadow-sm:   0 1px 3px  rgba(0,0,0,0.50);
    --shadow-md:   0 4px 16px rgba(0,0,0,0.55);
    --shadow-lg:   0 8px 40px rgba(0,0,0,0.65);
    --card-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

/* ── Light mode ──────────────────────────────────────────── */
[data-theme="light"] {
    --bg-primary:   #f2f2f7;
    --bg-secondary: #ffffff;
    --bg-tertiary:  #f2f2f7;
    --bg-elevated:  #ffffff;
    --bg-hover:     rgba(0, 0, 0, 0.04);
    --bg-input:     #ffffff;
    --bg-blur:      rgba(242, 242, 247, 0.90);

    --text-primary:   #000000;
    --text-secondary: rgba(60, 60, 67, 0.60);
    --text-muted:     rgba(60, 60, 67, 0.36);

    --accent:       #007aff;
    --accent-hover: #0062cc;
    --accent-glow:  rgba(0, 122, 255, 0.16);

    --color-red:    #ff3b30;
    --color-green:  #34c759;
    --color-orange: #ff9500;

    --border:    rgba(60, 60, 67, 0.13);
    --separator: rgba(60, 60, 67, 0.09);

    --shadow-sm:   0 1px 3px  rgba(0,0,0,0.08);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.10);
    --shadow-lg:   0 8px 32px rgba(0,0,0,0.14);
    --card-shadow: 0 1px 4px rgba(0,0,0,0.07), 0 4px 12px rgba(0,0,0,0.06);
}

/* ── Theme toggle (lives inside nav) ─────────────────────── */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 50%;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    transition: background 0.15s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover  { background: var(--bg-elevated); }
.theme-toggle:active { transform: scale(0.90); }

/* ── Selective transitions ───────────────────────────────── */
body, header, .card, .plan-day, .question-item,
.verse-link, .btn, input, textarea, select,
.notes-textarea, .message, .day-form, .auth-card,
.nav-links a, .logo {
    transition:
        background-color 0.20s ease,
        color            0.20s ease,
        border-color     0.20s ease,
        box-shadow       0.20s ease;
}