/*
 * Design tokens — single source of truth for color, type, spacing, radius,
 * shadow and motion. Components (components.css) and layout (layout.css)
 * consume these variables; they never hard-code a color or size directly.
 *
 * --primary / --primary-hover / --primary-active / --primary-soft are
 * intentionally left undefined here — ThemeService::activeCssVariables()
 * injects them as an inline :root block per active preset (see
 * layouts/app.php and layouts/auth.php). The fallbacks below (Blue) only
 * matter if that block is ever missing.
 */

:root {
    /* Primary — fallback only, see note above */
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-active: #1e40af;
    --primary-soft: #eff6ff;

    /* Neutrals */
    --background: #f4f6fb;
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --surface-alt: var(--background);
    --text: #1e293b;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --border-subtle: #eef1f6;

    /* Warm neutral used only by the homepage hero's Minimal-visual-theme
       ("default appearance") editorial look — every other surface keeps
       --background/--surface so this never ripples into the rest of the
       app. */
    --surface-cream: #f8f3ea;

    /* Focus ring — same hue as the active preset's primary (kept as its own
       token, per Phase 11 Bagian 27/16, so a visual theme can override just
       this if a background ever made the primary-colored ring hard to see,
       without touching the primary color itself). */
    --focus: var(--primary);

    /* Semantic — constant across every theme preset on purpose */
    --success: #15803d;
    --success-soft: #f0fdf4;
    --success-text: #166534;
    --warning: #b45309;
    --warning-soft: #fffbeb;
    --warning-text: #92400e;
    --danger: #dc2626;
    --danger-soft: #fef2f2;
    --danger-text: #991b1b;
    --info: #0284c7;
    --info-soft: #f0f9ff;
    --info-text: #075985;
    /* A fifth semantic color, added for the dashboard's 4-way statistic
       cards (Phase 13 internal UI reference: blue/green/purple/orange) —
       none of the four existing semantic colors above map to "purple", and
       reusing one of them would make two visually distinct stat cards
       (e.g. Total Pemilih vs Sudah Memilih) look identical. */
    --accent-purple: #7e22ce;
    --accent-purple-soft: #f3e8ff;

    /* Typography */
    --font-sans: 'Segoe UI', system-ui, -apple-system, 'Inter', Roboto, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    /* Editorial scale (Phase 13 Weblium-inspired redesign) — the existing
       scale topped out at 1.875rem, nowhere near an oversized editorial
       headline. Both are fluid (clamp) rather than a single fixed size, so
       the hero headline scales smoothly from 375px to 1280px+ instead of
       jumping at a breakpoint. --text-display is reserved for the ONE
       headline per page that should carry it (Section 3 of the Design
       Bible: "spend it in one place") — never apply it to every h1. */
    --text-4xl: clamp(2rem, 1.6rem + 2vw, 2.75rem);
    --text-display: clamp(2.5rem, 1.6rem + 4.5vw, 4.5rem);
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    /* Spacing scale (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    /* 7/9/11 were missing from this scale (an authoring gap, not an
       intentional "even only past 6" design — space-5 is odd and every
       marketing.css section built since Phase 13 already references
       --space-7/9/11 expecting the linear space-N = N*0.25rem pattern to
       hold) — completed here rather than reworking every call site. */
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-11: 2.75rem;
    --space-12: 3rem;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 999px;

    /* Shadow — kept light, never stacked heavily */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10);

    /* Motion */
    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 76px;
    --topbar-height: 64px;

    /* Sidebar surface — deliberately its own small token set (Phase 13
       internal UI reference: navy sidebar, white topbar, unrelated to the
       8-preset --primary system) rather than hard-coded colors, so a
       future preset or contrast requirement can still retune it without
       finding hex values buried in layout.css. Never varies with
       --color-theme/--visual-theme — the sidebar reads the SAME on every
       one of the 32 combinations by design (Bagian 6/35 of that spec). */
    --sidebar-bg: #0f172a;
    --sidebar-bg-elevated: #16213c;
    --sidebar-border: rgba(255, 255, 255, 0.08);
    --sidebar-text: #94a3b8;
    --sidebar-text-strong: #e2e8f0;
    --sidebar-active-text: #ffffff;
}

/* =====================================================================
   DEFAULT EDITORIAL DESIGN MODE (Phase 13/14)
   =====================================================================
   Scoped to theme_key="blue" (ThemeKey::DEFAULT) AND visual_theme=
   "minimal" (VisualThemeKey::DEFAULT) at once — the exact combination a
   school sees before anyone has ever opened Admin > Settings >
   Appearance. Re-maps the SAME custom properties every component in
   components.css/layout.css/marketing.css already consumes, so the
   ENTIRE app (homepage, login, AND the internal admin shell — app.php
   loads this file too) inherits an off-white/near-black/coral,
   flat-and-bordered editorial language for free, with zero PHP/database
   changes and zero risk to the other 31 color x visual combinations,
   which never match this selector and keep rendering exactly as before.
   Structural (non-color) rules specific to the marketing/login pages
   stay in marketing.css; this block is only the token remap. */
body[data-color-theme="blue"][data-visual-theme="minimal"] {
    --primary: #d8472c;
    --primary-hover: #b83a23;
    --primary-active: #a3331f;
    --primary-soft: #fbe6df;
    --background: #f7f2ea;
    --surface: #ffffff;
    --surface-alt: #efe7d9;
    --text: #1c1a17;
    --text-secondary: #55504a;
    --text-muted: #8a8378;
    --border: #ddd3c0;
    --border-subtle: #ebe3d4;

    /* Flat, bordered hierarchy instead of card + shadow */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 10px;
    --shadow-sm: none;
    --shadow-md: 0 1px 3px rgba(28, 22, 18, 0.06);
    --shadow-lg: 0 6px 20px rgba(28, 22, 18, 0.08);

    /* Big, dominant, tight editorial type */
    --text-4xl: clamp(2.75rem, 2rem + 3vw, 4.75rem);
    --text-display: clamp(3rem, 1.8rem + 6vw, 6.5rem);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-base: 0ms;
        --duration-slow: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--background);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
}

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

a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* Phase 11 Bagian 27: baseline visible focus for every interactive element.
   Components that already give focus a more specific treatment (buttons,
   form controls, switches, swatches — all in components.css) keep their own
   rule; this only fills the gap for plain links, pagination, breadcrumbs,
   dropdown items and anything future that doesn't opt out. Never removed
   without this (or an equivalent) replacement. */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-2);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: var(--text);
}

.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.fw-medium { font-weight: var(--font-medium); }
.fw-semibold { font-weight: var(--font-semibold); }

@media (max-width: 639px) {
    .hide-mobile { display: none !important; }
}
@media (min-width: 640px) {
    .hide-desktop { display: none !important; }
}

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