/*
 * Design Tokens — SexEducation Platform
 * Based on reference design. Dark theme, pink accent.
 */

/* ── Inter Font (self-hosted variable) ─────────────────────── */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter/InterVariable.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter Fallback';
    src: local('BlinkMacSystemFont'), local('Segoe UI'), local('sans-serif');
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
    size-adjust: 107%;
}

/* ── CSS Reset ─────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

:root {
    /* ── Colors (from reference) ──────────────────────────── */
    --bg: #020713;
    --bg-soft: #06101d;
    --panel: #08111f;
    --panel-2: #0b1423;
    --text: #f7f8fb;
    --muted: #b2bac7;
    --subtle: #8893a4;
    --line: #1a2638;

    --pink: #ff1f6d;
    --pink-2: #ff3c7f;
    --orange: #ff7a2f;
    --yellow: #ffc13d;
    --green: #3ed99a;

    /* ── Bootstrap overrides ────────────────────────────── */
    --bs-link-color: inherit;
    --bs-link-hover-color: inherit;
    --bs-link-color-rgb: 247, 248, 251;

    /* ── Semantic aliases ─────────────────────────────────── */
    --color-primary: var(--pink);
    --color-primary-hover: var(--pink-2);
    --color-primary-light: rgba(255, 31, 109, 0.12);
    --color-accent: var(--orange);

    --color-text: var(--text);
    --color-text-muted: var(--muted);
    --color-text-light: var(--subtle);

    --color-surface: var(--bg);
    --color-surface-alt: var(--bg-soft);
    --color-surface-raised: var(--panel);
    --color-surface-dark: var(--panel-2);

    --color-border: var(--line);
    --color-white: #ffffff;

    /* ── Feedback ─────────────────────────────────────────── */
    --color-danger: #ff5c76;
    --color-danger-hover: #e5506a;
    --color-danger-bg: #1a0f15;
    --color-danger-border: #63172b;

    --color-success: var(--green);
    --color-success-bg: #0d1f18;
    --color-success-border: #1a3d2e;

    --color-warning: #f6ad55;
    --color-warning-bg: #1a1610;
    --color-warning-border: #744210;

    --color-info: #63b3ed;
    --color-info-bg: #0d1520;
    --color-info-border: #2a4365;

    /* ── Typography ───────────────────────────────────────── */
    --font-family: Inter, 'Inter Fallback', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fs-xs: 13px;
    --fs-sm: 15px;
    --fs-base: 17px;
    --fs-lg: 19px;
    --fs-h3: 21px;
    --fs-h2: 32px;
    --fs-h1: 56px;

    /* ── Spacing scale ────────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* ── Layout ────────────────────────────────────────────── */
    --container: 1320px;
    --container-wide: 1400px;
    --container-width: 1320px;
    --reading-width: 740px;
    --header-height: 72px;

    /* ── Radius ────────────────────────────────────────────── */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;

    /* ── Shadows ───────────────────────────────────────────── */
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.26);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 12px 28px rgba(255, 31, 109, 0.18);
    --shadow-glow-lg: 0 15px 34px rgba(255, 31, 109, 0.24);

    /* ── Section spacing ──────────────────────────────────── */
    --section-y: 32px;

    /* ── Z-index ──────────────────────────────────────────── */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;

    /* ── Transitions ──────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* ── Focus ─────────────────────────────────────────────── */
    --focus-ring: 0 0 0 2px var(--pink);
}

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