/* ── Apple HIG Global Styles ─────────────────────────────────── */

:root {
    /* Accent colors */
    --accent: #0066D6; /* darkened slightly to meet contrast for small text on white */
    --accent-hover: #0052B8;
    --accent-active: #004EAD;

    /* Text colors */
    --text-primary: #1D1D1F;
    --text-secondary: #6E6E73; /* raised for better contrast */
    --text-tertiary: #6E6E73; /* adjusted to meet WCAG AA on light backgrounds */
    --text-on-dark: #ffffff;
    --text-on-light: #000000;

    /* Backgrounds */
    --bg-primary: #F2F2F7;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #E5E5EA;
    --bg-grouped: #F2F2F7;

    /* Fills */
    --fill-primary: rgba(120, 120, 128, 0.2);
    --fill-secondary: rgba(120, 120, 128, 0.16);
    --fill-tertiary: rgba(120, 120, 128, 0.12);

    /* Overlay / UI helpers */
    --overlay: rgba(0, 0, 0, 0.4);
    --toolbar-bg: rgba(242, 242, 247, 0.78);
    --accent-bg: rgba(0, 122, 255, 0.10);
    --accent-focus: rgba(0, 122, 255, 0.25);
    --shadow-thumb: 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.1);

    /* Separators */
    --separator: rgba(60, 60, 67, 0.12);
    --separator-opaque: #C6C6C8;

    /* Success / Danger / Warning */
    --success: #34C759;
    --success-bg: rgba(52, 199, 89, 0.08);
    --danger: #FF3B30;
    --danger-bg: rgba(255, 59, 48, 0.05);
    --warning: #946800;
    --warning-bg: rgba(255, 204, 0, 0.12);
    --warning-border: rgba(255, 204, 0, 0.3);

    /* Dark theme variables (applied when html[data-theme="dark"] or when system prefers dark) */
    --dark-text-primary: #E6E6E8;
    --dark-text-secondary: #A8A9AE;
    --dark-bg-primary: #0B0B0D;
    --dark-bg-secondary: #0F0F11;
    --dark-bg-tertiary: #1C1C1E;
    --dark-separator: rgba(255,255,255,0.06);

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 100px;

    /* Transitions */
    --ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
    --duration-fast: 0.15s;
    --duration-default: 0.25s;
    --duration-slow: 0.35s;

    /* Typography */
    --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display',
                 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif;
    --font-size-caption2: 11px;
    --font-size-caption1: 12px;
    --font-size-footnote: 13px;
    --font-size-subheadline: 15px;
    --font-size-body: 17px;
    --font-size-title3: 20px;
    --font-size-title2: 22px;
    --font-size-title1: 28px;
    --font-size-large-title: 34px;

    /* Rating colors */
    --rating-csfd: #BA0305;
    --rating-tmdb-bg: #032541;
    --rating-tmdb-text: #01D277;
    --rating-imdb: #F5C518;
}

/* ── Reset & Base ────────────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: 1.47059;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-tap-highlight-color: transparent;
}

a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    display: block;
    max-width: 100%;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

button:active {
    transform: scale(0.97);
}

input {
    font-family: inherit;
}

/* ── Scrollbar (subtle) ──────────────────────────────────────── */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--separator-opaque);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* ── Selection ───────────────────────────────────────────────── */

::selection {
    background: rgba(0, 122, 255, 0.2);
}

/* Apply dark theme when user sets data-theme="dark" or when OS prefers dark */
html[data-theme="dark"] {
    --accent: #0A84FF;

    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-tertiary: var(--dark-text-secondary);

    --bg-primary: var(--dark-bg-primary);
    --bg-secondary: var(--dark-bg-secondary);
    --bg-tertiary: var(--dark-bg-tertiary);

    --fill-primary: rgba(255,255,255,0.04);
    --fill-secondary: rgba(255,255,255,0.03);
    --fill-tertiary: rgba(255,255,255,0.02);

    --toolbar-bg: rgba(15, 15, 17, 0.6);
    --accent-focus: rgba(10, 132, 255, 0.2);
    --overlay: rgba(0, 0, 0, 0.6);

    --separator: var(--dark-separator);
    --separator-opaque: rgba(255,255,255,0.06);
}

/* Ensure explicit light theme overrides OS dark preference when user chooses "light" */
html[data-theme="light"] {
    --accent: #0066D6;

    --text-primary: #1D1D1F;
    --text-secondary: #6E6E73;
    --text-tertiary: #6E6E73;

    --bg-primary: #F2F2F7;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #E5E5EA;

    --fill-primary: rgba(120, 120, 128, 0.2);
    --fill-secondary: rgba(120, 120, 128, 0.16);
    --fill-tertiary: rgba(120, 120, 128, 0.12);

    --toolbar-bg: rgba(242, 242, 247, 0.78);
    --accent-focus: rgba(0, 122, 255, 0.25);
    --overlay: rgba(0, 0, 0, 0.4);

    --separator: rgba(60, 60, 67, 0.12);
    --separator-opaque: #C6C6C8;
}

/* ── Light-theme backdrop placeholder ────────────────────────── */
html[data-theme="light"] .modal-backdrop-image {
    background: linear-gradient(135deg,
        hsl(210, 25%, 82%) 0%,
        hsl(240, 20%, 84%) 35%,
        hsl(280, 18%, 83%) 60%,
        hsl(320, 20%, 82%) 85%,
        hsl(210, 22%, 80%) 100%
    );
}

/* ── Theme Toggle Icon Visibility ─────────────────────────────── */

.theme-toggle .icon { display: none; }
html[data-vkine-theme-mode="system"] .theme-toggle .icon-system { display: inline-block; }
html:not([data-vkine-theme-mode="system"])[data-theme="light"] .theme-toggle .icon-sun { display: inline-block; }
html:not([data-vkine-theme-mode="system"])[data-theme="dark"]  .theme-toggle .icon-moon { display: inline-block; }

@media (prefers-color-scheme: dark) {
    :root {
        --accent: #0A84FF;

        --text-primary: var(--dark-text-primary);
        --text-secondary: var(--dark-text-secondary);
        --text-tertiary: var(--dark-text-secondary);

        --bg-primary: var(--dark-bg-primary);
        --bg-secondary: var(--dark-bg-secondary);
        --bg-tertiary: var(--dark-bg-tertiary);

        --fill-primary: rgba(255,255,255,0.04);
        --fill-secondary: rgba(255,255,255,0.03);
        --fill-tertiary: rgba(255,255,255,0.02);

        --separator: var(--dark-separator);
        --separator-opaque: rgba(255,255,255,0.06);
    }
}