/* ===================================================================
   Pravauzb — Design System (theme.css)
   Cohesive with the Course app palette (deep navy / soft blue accent).
   Layer 1: design tokens · Layer 2: base · Layer 3: components
   =================================================================== */

:root {
    /* ---- Brand palette ---- */
    --bg:            #050f1b;
    --bg-elevated:   #0a1326;
    --surface:       #0f1c3a;
    --surface-2:     #13234a;
    --border:        #223357;
    --border-strong: #2a4060;

    --primary:       #4a6cff;
    --primary-600:   #3a58e0;
    --primary-700:   #2f47b8;
    --accent:        #80a0ff;
    --accent-soft:   rgba(128, 160, 255, 0.12);

    --success:       #3fbf76;
    --success-soft:  rgba(63, 191, 118, 0.14);
    --danger:        #ef5d6b;
    --danger-soft:   rgba(239, 93, 107, 0.14);
    --warning:       #ffcc4d;

    --text:          #e7ecff;
    --text-muted:    #9fb0d4;
    --text-dim:      #6b7ba3;

    /* ---- Typography ---- */
    --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Manrope", var(--font-sans);

    /* ---- Radius & shadow ---- */
    --radius-sm: 8px;
    --radius:    14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow:    0 10px 30px -12px rgba(0, 0, 0, .55);
    --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .7);
    --ring:      0 0 0 3px rgba(74, 108, 255, .35);

    /* ---- Layout ---- */
    --container: 1180px;
    --nav-h: 68px;

    /* ---- Motion ---- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --dur: .22s;
}

/* -------------------------------------------------- Base */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Ambient background glow */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(60% 50% at 15% 0%, rgba(74, 108, 255, .16), transparent 60%),
        radial-gradient(50% 50% at 100% 10%, rgba(128, 160, 255, .10), transparent 55%);
    pointer-events: none;
}

a { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--text); }

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

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }

::selection { background: var(--primary); color: #fff; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

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

.muted { color: var(--text-muted); }
.text-center { text-align: center; }
.hidden { display: none !important; }

/* -------------------------------------------------- Buttons */
.btn {
    --btn-bg: var(--primary);
    display: inline-flex; align-items: center; justify-content: center; gap: .55em;
    padding: .8rem 1.4rem;
    font: inherit; font-weight: 700; font-size: .96rem;
    color: #fff; background: var(--btn-bg);
    border: 1px solid transparent; border-radius: var(--radius-pill);
    cursor: pointer; white-space: nowrap;
    transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    box-shadow: 0 8px 20px -8px rgba(74, 108, 255, .6);
}
.btn:hover { background: var(--primary-600); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-lg { padding: 1rem 1.8rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

.btn-ghost {
    --btn-bg: transparent;
    color: var(--text); border-color: var(--border-strong);
    box-shadow: none;
}
.btn-ghost:hover { --btn-bg: var(--surface); border-color: var(--accent); }

.btn-soft {
    --btn-bg: var(--accent-soft);
    color: var(--accent); box-shadow: none;
}
.btn-soft:hover { --btn-bg: rgba(128,160,255,.2); }

.btn-danger { --btn-bg: var(--danger); box-shadow: 0 8px 20px -8px rgba(239,93,107,.6); }
.btn-danger:hover { --btn-bg: #d94b59; }

/* -------------------------------------------------- Cards */
.card {
    background: linear-gradient(180deg, var(--bg-elevated), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.card-pad { padding: 26px; }

/* -------------------------------------------------- Forms */
.field { margin-bottom: 18px; }
.field label {
    display: block; margin-bottom: 8px;
    font-size: .88rem; font-weight: 600; color: var(--text-muted);
}
.input, .select {
    width: 100%;
    padding: .85rem 1rem;
    font: inherit; color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder { color: var(--text-dim); }
.input:focus, .select:focus { border-color: var(--primary); box-shadow: var(--ring); }
.input-group { position: relative; }
.input-group .input { padding-left: 2.9rem; }
.input-group .icon {
    position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
    color: var(--text-dim); pointer-events: none; display: flex;
}

.field-error { margin-top: 7px; font-size: .82rem; color: var(--danger); }
.input.has-error { border-color: var(--danger); }

.check { display: flex; align-items: center; gap: .6rem; cursor: pointer; user-select: none; font-size: .9rem; color: var(--text-muted); }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }

/* -------------------------------------------------- Alerts */
.alert {
    display: flex; align-items: center; gap: .7rem;
    padding: .9rem 1.1rem; border-radius: var(--radius);
    font-size: .92rem; font-weight: 600;
    border: 1px solid transparent; margin-bottom: 18px;
}
.alert-success { background: var(--success-soft); color: #7ee6a8; border-color: rgba(63,191,118,.3); }
.alert-error   { background: var(--danger-soft);  color: #ff9aa4; border-color: rgba(239,93,107,.3); }

/* -------------------------------------------------- Badges & chips */
.badge {
    display: inline-flex; align-items: center; gap: .4em;
    padding: .3rem .7rem; border-radius: var(--radius-pill);
    font-size: .76rem; font-weight: 700;
    background: var(--accent-soft); color: var(--accent);
}
.badge-success { background: var(--success-soft); color: #7ee6a8; }
.badge-danger  { background: var(--danger-soft);  color: #ff9aa4; }

/* -------------------------------------------------- Utilities */
.stack > * + * { margin-top: var(--stack, 16px); }
.grid { display: grid; gap: 20px; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: 10px; }
.gap { gap: 18px; }

@media (max-width: 640px) {
    body { font-size: 15px; }
    .card-pad { padding: 20px; }
}