/* ============================================================
   VLE PC — design tokens, reset, typography, layout primitives
   Everything visual is a custom property here; component files
   below only ever reference these, never raw hex values.
   ============================================================ */

:root {
    /* Brand — violet */
    --primary-50: #f5f3ff;
    --primary-100: #ede9fe;
    --primary-200: #ddd6fe;
    --primary-300: #c4b5fd;
    --primary-400: #a78bfa;
    --primary-500: #8b5cf6;
    --primary-600: #7c3aed;
    --primary-700: #6d28d9;
    --primary-800: #5b21b6;
    --primary-900: #4c1d95;

    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    --gradient-button: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);

    /* Neutrals — slate */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    --success: #10b981;
    --success-light: #d1fae5;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --error: #ef4444;
    --error-light: #fee2e2;
    --info: #3b82f6;
    --info-light: #dbeafe;

    --bg-primary: #f8fafc;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f1f5f9;

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --text-inverse: #ffffff;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    --radius-sm: .375rem;
    --radius-md: .5rem;
    --radius-lg: .75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* Devanagari fallback: the document generators render Marathi text. */
    --font-marathi: 'Noto Sans Devanagari', 'Mangal', 'Nirmala UI', var(--font-sans);

    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-md: .9375rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 300;
    --z-modal: 400;
    --z-toast: 500;

    --header-height: 64px;
    --container-max: 1200px;
}

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

/*
 * The hidden attribute has to win.
 *
 * The browser hides [hidden] with `display: none` from its own stylesheet, and
 * any `display` a class of ours sets beats it — author styles outrank the user
 * agent. So `.media-modal { display: grid }` left both editor dialogs painted
 * over the page permanently, however carefully the JavaScript set .hidden, and
 * the post editor could not be reached at all. Every panel, modal and result
 * block in the admin is toggled this way, so the rule belongs here once rather
 * than as a `[hidden]` override next to each of them.
 *
 * !important is the point, not an oversight: it is what outranks the class.
 */
[hidden] {
    display: none !important;
}

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

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* The footer stays at the bottom on short pages without position tricks. */
main {
    flex: 1 0 auto;
}

:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: var(--leading-tight);
    color: var(--text-primary);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
    margin-bottom: var(--space-4);
    color: var(--text-secondary);
}

a {
    color: var(--primary-600);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover { color: var(--primary-700); }

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

/* The actual fix for icons.svg lives in header.php/admin-header.php, which
   inline the sprite (readfile()) instead of loading it as an external file
   — an internal <style> rule inside an EXTERNALLY-referenced SVG never
   reaches <use> clones across the document boundary (confirmed empirically:
   every icon rendered solid black instead of an outline), but once the
   sprite is same-document, its own <style>symbol{fill:none;stroke:
   currentColor}</style> rule applies normally. This rule is a second,
   defensive layer over that — every icon reference site-wide is "#i-name"
   (see the sprite's own naming), so it is harmless to pin fill/stroke here
   too rather than depend solely on the sprite file's internal stylesheet. */
use[href^="#i-"] {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

ul, ol { padding-left: var(--space-5); }

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

button { cursor: pointer; background: none; border: none; }

code, pre {
    font-family: ui-monospace, 'JetBrains Mono', 'Fira Code', monospace;
    font-size: .875em;
}

/* ── Layout primitives ───────────────────────────────────── */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-6);
}

.container--narrow { max-width: 720px; }

.section { padding-block: var(--space-10); }

.stack > * + * { margin-top: var(--space-4); }

.hidden { display: none !important; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.text-center { text-align: center; }
.text-muted { color: var(--text-secondary); }
.text-sm { font-size: var(--text-sm); }
.text-xs { font-size: var(--text-xs); }

.marathi { font-family: var(--font-marathi); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}