/* Custom theme: loaded after the Signal styles on every page. */

/* Optional: load Inter + Manrope (remove if your CSP blocks external fonts) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&display=swap");

:root {
    /* Brand */
    --accent: #6844ce;
    --accent-hover: #5736b0;
    --on-accent: #FFFFFF;

    /* Surfaces: cool, slightly violet-tinted neutrals */
    --bg: #F4F3F9;
    --surface: #FFFFFF;
    --raised: #FFFFFF;
    --border: #E3E1EE;

    /* Text */
    --text: #1C1A2B;
    --muted: #6F6B84;

    /* Shape & type */
    --radius: 10px;
    --font: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-heading: Manrope, Inter, system-ui, sans-serif;

    /* Own helper variables */
    --ring: color-mix(in srgb, var(--accent) 35%, transparent);
    --shadow-sm: 0 1px 2px rgba(40, 24, 90, .06);
    --shadow-md: 0 6px 20px rgba(40, 24, 90, .08);
}

:root[data-theme="dark"] {
    --accent: #8b6cf7;
    --accent-hover: #a28aff;
    --on-accent: #FFFFFF;

    --bg: #121118;
    --surface: #1A1923;
    --raised: #232230;
    --border: #333144;

    --text: #EEEDF6;
    --muted: #9B97B2;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
}

/* ---------- Global polish ---------- */

body {
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    letter-spacing: -0.015em;
}

::selection {
    background: var(--accent);
    color: var(--on-accent);
}

a {
    transition: color .15s ease;
}

/* Smooth, consistent interactions */
button,
input,
select,
textarea {
    transition: background-color .15s ease, border-color .15s ease,
                box-shadow .15s ease, transform .1s ease;
}

button:not(:disabled):active {
    transform: translateY(1px);
}

/* Clear, branded focus ring */
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ring);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--ring);
    outline: none;
}

/* Soft depth on inputs */
input,
select,
textarea {
    box-shadow: var(--shadow-sm);
}

/* Nicer scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--muted);
    background-clip: content-box;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}