/* ===========================================================================
   Base — shared by every page of zgaparo.ge
   ---------------------------------------------------------------------------
   Design tokens (light and night), the page background, the icon style, the
   focus ring, the theme toggle and the footer. index.html loads it after
   main.css and before refresh.css; the standalone pages (Premium, terms,
   privacy, contact, 404, success) load it before pages.css. offline.html
   keeps a small inline copy of what it needs, because it must render with no
   network at all.

   The palette keeps the brand blue and leans it toward violet for the magic,
   with a warm gold for stars, the moon and the one playful call to action.
   Every text/background pair was checked against WCAG AA (4.5:1).
   =========================================================================== */

:root {
    --container: 1180px;

    --bg-color: #F6F7FC;
    --card-bg: #FFFFFF;
    --surface-2: #EEF0FA;
    --text-main: #1B1F3B;
    --text-muted: #5A6180;           /* 6.1:1 on white, 5.7:1 on the page */
    --border: rgba(27, 31, 59, 0.09);
    --border-strong: rgba(27, 31, 59, 0.16);

    --primary-color: #2563EB;
    --primary-text: #1D5FD6;         /* 5.7:1 on white */
    --primary-fill: #2563EB;         /* white on it: 5.2:1 */
    --violet: #6D4AFF;               /* white on it: 5.2:1 */
    --primary-gradient: linear-gradient(135deg, #2563EB 0%, #6D4AFF 100%);
    --primary-soft: rgba(37, 99, 235, 0.09);

    --gold: #FFC247;
    --gold-2: #FFB547;
    --gold-text: #9A5B00;            /* 5.4:1 on white */
    --gold-soft: #FFF4DC;
    --rating-color: #9A5B00;
    --streak-color: #C2410C;

    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-border: rgba(27, 31, 59, 0.08);
    --nav-bg: #FFFFFF;

    --shadow-sm: 0 1px 2px rgba(27, 31, 59, 0.06), 0 2px 8px rgba(27, 31, 59, 0.05);
    --shadow-md: 0 2px 6px rgba(27, 31, 59, 0.05), 0 10px 28px rgba(27, 31, 59, 0.08);
    --shadow-lg: 0 10px 24px rgba(27, 31, 59, 0.09), 0 28px 56px rgba(27, 31, 59, 0.12);
    --shadow-light: var(--shadow-md);
    --shadow-hover: var(--shadow-lg);
    --shadow-primary: 0 8px 22px rgba(79, 70, 229, 0.30);
    --ring: 0 0 0 3px rgba(37, 99, 235, 0.35);

    --skeleton-base: #E7E9F4;
    --skeleton-shine: #F4F5FB;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

}

html[data-theme="dark"] {
    --bg-color: #0B1026;
    --card-bg: #141B3A;
    --surface-2: #1C2448;
    --text-main: #EEF1FF;
    --text-muted: #A3ABCF;           /* 7.4:1 on the cards */
    --border: rgba(163, 171, 255, 0.12);
    --border-strong: rgba(163, 171, 255, 0.22);

    --primary-color: #4F83FF;
    --primary-text: #8FB3FF;         /* 8:1 on the cards */
    --primary-fill: #2563EB;
    --primary-soft: rgba(79, 131, 255, 0.14);

    --gold-text: #FFD27A;            /* 11.8:1 on the cards */
    --gold-soft: rgba(255, 194, 71, 0.14);
    --rating-color: #FFD27A;
    --streak-color: #FDBA74;

    --glass-bg: rgba(16, 22, 50, 0.78);
    --glass-border: rgba(163, 171, 255, 0.12);
    --nav-bg: #10163A;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);
    --shadow-primary: 0 8px 24px rgba(79, 70, 229, 0.45);
    --ring: 0 0 0 3px rgba(143, 179, 255, 0.45);

    --skeleton-base: #1A2146;
    --skeleton-shine: #242D5C;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

body {
    background-color: var(--bg-color);
    /* A little colour in the corners of the page, so it isn't flat grey. */
    background-image:
        radial-gradient(900px 500px at 100% -10%, rgba(109, 74, 255, 0.07), transparent 60%),
        radial-gradient(700px 420px at -10% 10%, rgba(37, 99, 235, 0.06), transparent 60%);
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Night mode is a night sky: a scatter of faint, fixed stars behind everything. */
html[data-theme="dark"] body {
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.55), transparent 60%),
        radial-gradient(1px 1px at 78% 12%, rgba(255, 255, 255, 0.45), transparent 60%),
        radial-gradient(1.5px 1.5px at 42% 32%, rgba(255, 255, 255, 0.35), transparent 60%),
        radial-gradient(1px 1px at 88% 44%, rgba(255, 255, 255, 0.4), transparent 60%),
        radial-gradient(1px 1px at 22% 66%, rgba(255, 255, 255, 0.35), transparent 60%),
        radial-gradient(1.5px 1.5px at 64% 78%, rgba(255, 255, 255, 0.3), transparent 60%),
        radial-gradient(900px 600px at 100% 0%, rgba(109, 74, 255, 0.16), transparent 60%),
        radial-gradient(800px 600px at 0% 30%, rgba(37, 99, 235, 0.12), transparent 60%);
    background-attachment: fixed;
    background-size: 100% 100%;
}

.i {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.25em;
}

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100000;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--primary-fill);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    transition: top 0.2s var(--ease-out);
}

.skip-link:focus {
    top: 12px;
}

/* One focus ring for every control, visible on light and dark. */
:where(button, a, input, select, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

button,
[role="button"],
summary,
select {
    touch-action: manipulation;
}

/* ── Theme toggle ────────────────────────────────────────────────────────── */

.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    color: var(--text-main);
    transition: transform 0.25s var(--ease-spring), border-color 0.2s, color 0.2s;
}

.theme-toggle:hover {
    transform: rotate(-15deg) scale(1.06);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
    color: var(--primary-text);
}

.theme-toggle .i {
    width: 20px;
    height: 20px;
}

.theme-toggle .theme-ico-sun,
html[data-theme="dark"] .theme-toggle .theme-ico-moon {
    display: none;
}

html[data-theme="dark"] .theme-toggle .theme-ico-sun {
    display: block;
    color: var(--gold);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-footer {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 40px 20px calc(32px + env(safe-area-inset-bottom, 0px));
    border-radius: 32px 32px 0 0;
    border-top: 1px solid var(--border);
    background: var(--card-bg);
    box-shadow: none;
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
    margin-top: auto;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.footer-logo {
    width: auto;
    height: 110px;
    margin: -14px 0 -20px;
}

.footer-brand p {
    max-width: 380px;
    margin: 0;
    color: var(--text-muted);
    font-weight: 600;
    line-height: 1.6;
}

.footer-social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    background: #1877F2;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.2s var(--ease-out), filter 0.2s;
}

.footer-social:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    gap: 6px 22px;
}

.footer-links a,
.footer-link-btn {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--text-main);
    font-weight: 700;
    text-decoration: none;
}

.footer-link-btn {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
}

.footer-links a:hover,
.footer-link-btn:hover {
    color: var(--primary-text);
}

.footer-copy {
    color: var(--text-muted);
    font-size: 0.85rem;
}


/* ── Motion off ──────────────────────────────────────────────────────────── */

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