/* ==========================================================================
   Aureon Design System — dark, premium, restrained.
   Layered space-navy surfaces + brushed-gold accent + Inter family.
   No frameworks. Tokens + components only.
   ========================================================================== */

:root {
    color-scheme: dark;

    /* ---------- Surface (5 layers, low contrast — like a folded paper) ---------- */
    --aur-bg:           #05050F;  /* deepest */
    --aur-bg-1:         #07071A;  /* page panels */
    --aur-bg-2:         #0B0B22;  /* cards */
    --aur-bg-3:         #11112C;  /* hover, inset */
    --aur-bg-4:         #161636;  /* elevated */

    /* ---------- Ink ---------- */
    --aur-ink:          #F4F4F8;
    --aur-ink-2:        #C8CBD9;
    --aur-ink-3:        #8B90A6;
    --aur-ink-4:        #5C6079;

    /* ---------- Line (subtle white, not black) ---------- */
    --aur-line:         rgba(255, 255, 255, 0.07);
    --aur-line-2:       rgba(255, 255, 255, 0.12);
    --aur-line-strong:  rgba(255, 255, 255, 0.22);

    /* ---------- Brand: Aureon gold ---------- */
    --aur-accent:        #D4AF37;
    --aur-accent-bright: #F4CC4F;  /* hover / hot */
    --aur-accent-deep:   #A8861E;  /* active / shadow */
    --aur-accent-soft:   rgba(212, 175, 55, 0.10);
    --aur-accent-tint:   rgba(212, 175, 55, 0.16);
    --aur-accent-ink:    #1A1408;
    --aur-focus-ring:    rgba(212, 175, 55, 0.32);

    /* Secondary tone (complements gold without going neon) */
    --aur-cyan:          #6FD4C2;
    --aur-cyan-soft:     rgba(111, 212, 194, 0.10);

    /* ---------- Status ---------- */
    --aur-success:       #4FC07A;
    --aur-success-soft:  rgba(79, 192, 122, 0.10);
    --aur-danger:        #E36B6B;
    --aur-danger-soft:   rgba(227, 107, 107, 0.12);
    --aur-warning:       #E5B655;
    --aur-warning-soft:  rgba(229, 182, 85, 0.12);
    --aur-info:          #6FB1D4;
    --aur-info-soft:     rgba(111, 177, 212, 0.10);

    /* ---------- Type ---------- */
    --aur-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --aur-font-display: "Inter Tight", var(--aur-font-sans);
    --aur-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* ---------- Space (4px scale) ---------- */
    --aur-s-1:  4px;
    --aur-s-2:  8px;
    --aur-s-3:  12px;
    --aur-s-4:  16px;
    --aur-s-5:  20px;
    --aur-s-6:  24px;
    --aur-s-7:  32px;
    --aur-s-8:  40px;
    --aur-s-9:  56px;
    --aur-s-10: 80px;

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

    /* ---------- Shadow (in dark mode, shadows lift via inner-glow + soft black) ---------- */
    --aur-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --aur-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.4);
    --aur-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
    --aur-glow:     0 0 0 1px var(--aur-accent-tint), 0 0 30px -8px var(--aur-accent-soft);

    /* ---------- Gradients ---------- */
    --aur-grad-accent: linear-gradient(135deg, #F4CC4F 0%, #D4AF37 45%, #A8861E 100%);
    --aur-grad-hero:   linear-gradient(180deg, transparent 0%, rgba(212, 175, 55, 0.04) 100%);

    /* ---------- Motion ---------- */
    --aur-dur-fast: 120ms;
    --aur-dur:      200ms;
    --aur-dur-slow: 360ms;
    --aur-ease:     cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    margin: 0;
    font-family: var(--aur-font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--aur-ink-2);
    background: var(--aur-bg);
    background-image:
      radial-gradient(900px 600px at 92% -10%, rgba(212, 175, 55, 0.06), transparent 60%),
      radial-gradient(700px 500px at -10% 110%, rgba(111, 212, 194, 0.04), transparent 60%);
    background-attachment: fixed;
    font-feature-settings: "cv11", "ss01";
    min-height: 100vh;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
hr { border: 0; border-top: 1px solid var(--aur-line); margin: var(--aur-s-7) 0; }
::selection { background: var(--aur-accent-tint); color: var(--aur-ink); }

/* ==========================================================================
   Typography
   ========================================================================== */
.aur-display {
    font-family: var(--aur-font-display);
    font-weight: 600;
    font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--aur-ink);
    margin: 0;
}
.aur-h1 {
    font-family: var(--aur-font-display);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--aur-ink);
    margin: 0;
}
.aur-h2 {
    font-family: var(--aur-font-display);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--aur-ink);
    margin: 0;
}
.aur-h3 {
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.35;
    color: var(--aur-ink);
    margin: 0;
}
.aur-lede {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--aur-ink-2);
    margin: 0;
}
.aur-text { color: var(--aur-ink-2); margin: 0; }
.aur-muted { color: var(--aur-ink-3); }
.aur-dim   { color: var(--aur-ink-4); }
.aur-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aur-accent);
    margin: 0;
}
.aur-gradient-text {
    background: var(--aur-grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.aur-shell { min-height: 100vh; display: flex; flex-direction: column; }
.aur-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--aur-s-6); }
.aur-narrow    { width: 100%; max-width: 760px;  margin: 0 auto; padding: 0 var(--aur-s-6); }
.aur-stack > * + *    { margin-top: var(--aur-s-4); }
.aur-stack-lg > * + * { margin-top: var(--aur-s-6); }
.aur-stack-xl > * + * { margin-top: var(--aur-s-8); }
.aur-row    { display: flex; gap: var(--aur-s-4); align-items: center; flex-wrap: wrap; }
.aur-spread { display: flex; gap: var(--aur-s-4); align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* ==========================================================================
   Header / Footer
   ========================================================================== */
.aur-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(5, 5, 15, 0.72);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid var(--aur-line);
}
.aur-header__inner {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.aur-brand {
    display: flex;
    align-items: center;
    gap: var(--aur-s-3);
    font-family: var(--aur-font-display);
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: -0.015em;
    color: var(--aur-ink);
}
.aur-brand__mark {
    width: 30px; height: 30px;
    border-radius: var(--aur-r-sm);
    background: var(--aur-grad-accent);
    color: var(--aur-accent-ink);
    display: grid; place-items: center;
    font-weight: 700; font-size: 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.aur-nav { display: flex; gap: var(--aur-s-5); align-items: center; }
.aur-nav a {
    color: var(--aur-ink-3);
    font-size: 0.9375rem;
    transition: color var(--aur-dur) var(--aur-ease);
}
.aur-nav a:hover { color: var(--aur-ink); }

.aur-footer {
    border-top: 1px solid var(--aur-line);
    padding: var(--aur-s-7) 0;
    color: var(--aur-ink-3);
    font-size: 0.875rem;
    margin-top: auto;
    background: var(--aur-bg-1);
}

/* ==========================================================================
   Card
   ========================================================================== */
.aur-card {
    background: var(--aur-bg-1);
    border: 1px solid var(--aur-line);
    border-radius: var(--aur-r-lg);
    padding: var(--aur-s-7);
    position: relative;
}
.aur-card--inset {
    background: var(--aur-bg-2);
    border-color: var(--aur-line);
}
.aur-card--floating {
    background: var(--aur-bg-2);
    box-shadow: var(--aur-shadow-lg);
}
.aur-card--accent {
    border-color: var(--aur-accent-tint);
    box-shadow: var(--aur-glow);
}

/* ==========================================================================
   Form
   ========================================================================== */
.aur-form { display: flex; flex-direction: column; gap: var(--aur-s-5); }
.aur-field { display: flex; flex-direction: column; gap: var(--aur-s-2); }
.aur-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--aur-ink-2);
    letter-spacing: 0;
}
.aur-label__hint { color: var(--aur-ink-4); font-weight: 400; margin-left: var(--aur-s-1); }

.aur-input,
.aur-textarea,
.aur-select {
    width: 100%;
    background: var(--aur-bg-2);
    border: 1px solid var(--aur-line-2);
    border-radius: var(--aur-r-md);
    padding: 12px 14px;
    font: inherit;
    color: var(--aur-ink);
    transition: border-color var(--aur-dur) var(--aur-ease),
                box-shadow var(--aur-dur) var(--aur-ease),
                background var(--aur-dur) var(--aur-ease);
    -webkit-appearance: none;
    appearance: none;
}
.aur-input::placeholder,
.aur-textarea::placeholder { color: var(--aur-ink-4); }
.aur-input:hover,
.aur-textarea:hover,
.aur-select:hover { border-color: var(--aur-line-strong); background: var(--aur-bg-3); }
.aur-input:focus,
.aur-textarea:focus,
.aur-select:focus {
    outline: none;
    border-color: var(--aur-accent);
    background: var(--aur-bg-3);
    box-shadow: 0 0 0 4px var(--aur-focus-ring);
}
.aur-input--invalid,
.aur-textarea--invalid {
    border-color: var(--aur-danger);
    box-shadow: 0 0 0 4px rgba(227, 107, 107, 0.18);
}
.aur-input:-webkit-autofill,
.aur-input:-webkit-autofill:hover,
.aur-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--aur-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--aur-bg-2) inset;
    transition: background-color 9999s ease-out;
}
.aur-textarea { resize: vertical; min-height: 96px; line-height: 1.55; }

.aur-select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%238B90A6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}
.aur-select option { background: var(--aur-bg-2); color: var(--aur-ink); }

.aur-checkbox { display: inline-flex; gap: var(--aur-s-2); align-items: center; cursor: pointer; user-select: none; font-size: 0.9375rem; color: var(--aur-ink-2); }
.aur-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.aur-checkbox__box {
    width: 18px; height: 18px;
    border: 1px solid var(--aur-line-2);
    border-radius: 5px;
    background: var(--aur-bg-2);
    display: grid; place-items: center;
    transition: border-color var(--aur-dur) var(--aur-ease), background var(--aur-dur) var(--aur-ease);
}
.aur-checkbox input:checked + .aur-checkbox__box {
    background: var(--aur-accent);
    border-color: var(--aur-accent);
}
.aur-checkbox__box::after {
    content: "";
    width: 10px; height: 6px;
    border-left: 2px solid var(--aur-accent-ink);
    border-bottom: 2px solid var(--aur-accent-ink);
    transform: rotate(-45deg) translate(1px, -1px) scale(0);
    transition: transform var(--aur-dur) var(--aur-ease);
}
.aur-checkbox input:checked + .aur-checkbox__box::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.aur-checkbox input:focus-visible + .aur-checkbox__box { box-shadow: 0 0 0 4px var(--aur-focus-ring); }

.aur-help { font-size: 0.8125rem; color: var(--aur-ink-3); }
.aur-error { font-size: 0.8125rem; color: var(--aur-danger); }

/* ==========================================================================
   Button
   ========================================================================== */
.aur-btn {
    --_bg: var(--aur-bg-3);
    --_fg: var(--aur-ink);
    --_bd: var(--aur-line-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--aur-s-2);
    height: 44px;
    padding: 0 var(--aur-s-5);
    border-radius: var(--aur-r-md);
    border: 1px solid var(--_bd);
    background: var(--_bg);
    color: var(--_fg);
    font: inherit;
    font-weight: 500;
    font-size: 0.9375rem;
    letter-spacing: 0;
    cursor: pointer;
    transition: transform var(--aur-dur-fast) var(--aur-ease),
                background var(--aur-dur) var(--aur-ease),
                border-color var(--aur-dur) var(--aur-ease),
                color var(--aur-dur) var(--aur-ease),
                box-shadow var(--aur-dur) var(--aur-ease);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
.aur-btn:hover { transform: translateY(-1px); }
.aur-btn:active { transform: translateY(0); }
.aur-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--aur-focus-ring); }
.aur-btn[disabled], .aur-btn[aria-busy="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

.aur-btn--primary {
    --_bg: var(--aur-accent);
    --_fg: var(--aur-accent-ink);
    --_bd: var(--aur-accent);
    background-image: var(--aur-grad-accent);
    box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 0 24px -10px rgba(212,175,55,0.5);
}
.aur-btn--primary:hover {
    --_bd: var(--aur-accent-bright);
    box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset, 0 0 32px -8px rgba(212,175,55,0.65);
}
.aur-btn--primary:active { --_bd: var(--aur-accent-deep); }

.aur-btn--secondary {
    --_bg: var(--aur-bg-2);
    --_fg: var(--aur-ink);
    --_bd: var(--aur-line-2);
}
.aur-btn--secondary:hover { --_bg: var(--aur-bg-3); --_bd: var(--aur-line-strong); }

.aur-btn--ghost {
    --_bg: transparent;
    --_fg: var(--aur-ink-2);
    --_bd: transparent;
    height: 38px;
    padding: 0 var(--aur-s-3);
}
.aur-btn--ghost:hover { --_bg: var(--aur-bg-3); --_fg: var(--aur-ink); }

.aur-btn--lg { height: 52px; padding: 0 var(--aur-s-7); font-size: 1rem; }
.aur-btn--block { width: 100%; }

/* ==========================================================================
   Link
   ========================================================================== */
.aur-link {
    color: var(--aur-accent);
    border-bottom: 1px solid transparent;
    transition: color var(--aur-dur) var(--aur-ease), border-color var(--aur-dur) var(--aur-ease);
}
.aur-link:hover { color: var(--aur-accent-bright); border-bottom-color: currentColor; }

/* ==========================================================================
   Alert
   ========================================================================== */
.aur-alert {
    display: flex;
    gap: var(--aur-s-3);
    padding: var(--aur-s-3) var(--aur-s-4);
    border-radius: var(--aur-r-md);
    border: 1px solid var(--aur-line-2);
    background: var(--aur-bg-2);
    color: var(--aur-ink-2);
    font-size: 0.875rem;
    line-height: 1.5;
}
.aur-alert--danger  { background: var(--aur-danger-soft);  border-color: rgba(227, 107, 107, 0.25); color: #FFB5B5; }
.aur-alert--success { background: var(--aur-success-soft); border-color: rgba(79, 192, 122, 0.25);  color: #A8E5BE; }
.aur-alert--warning { background: var(--aur-warning-soft); border-color: rgba(229, 182, 85, 0.25);  color: #F0D08A; }
.aur-alert--info    { background: var(--aur-info-soft);    border-color: rgba(111, 177, 212, 0.25); color: #A8CFE5; }

/* ==========================================================================
   Auth split layout (login / register)
   ========================================================================== */
.aur-auth {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    min-height: calc(100vh - 64px);
}
@media (min-width: 960px) {
    .aur-auth { grid-template-columns: 1fr 1fr; }
}
.aur-auth__hero {
    display: none;
    background: var(--aur-bg-1);
    background-image:
      radial-gradient(800px 500px at 90% -10%, rgba(212, 175, 55, 0.18), transparent 60%),
      radial-gradient(600px 400px at -10% 110%, rgba(111, 212, 194, 0.10), transparent 60%);
    border-right: 1px solid var(--aur-line);
    padding: var(--aur-s-10) var(--aur-s-9);
    position: relative;
    overflow: hidden;
}
@media (min-width: 960px) {
    .aur-auth__hero { display: flex; flex-direction: column; justify-content: space-between; gap: var(--aur-s-9); }
}
.aur-auth__form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--aur-s-9) var(--aur-s-6);
    background: var(--aur-bg);
}
.aur-auth__form-inner {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: var(--aur-s-7);
}

.aur-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(60% 60% at 30% 40%, #000 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(60% 60% at 30% 40%, #000 30%, transparent 80%);
    pointer-events: none;
}

/* Stat block on hero */
.aur-stat-row { display: flex; gap: var(--aur-s-7); flex-wrap: wrap; position: relative; }
.aur-stat__num {
    font-family: var(--aur-font-display);
    font-weight: 600;
    font-size: 1.75rem;
    letter-spacing: -0.015em;
    color: var(--aur-ink);
    line-height: 1.1;
}
.aur-stat__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--aur-ink-3);
    margin-top: 6px;
}

/* ==========================================================================
   Tracking timeline
   ========================================================================== */
.aur-track { display: flex; flex-direction: column; gap: 0; }
.aur-track__step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--aur-s-4);
    padding: var(--aur-s-4) 0;
}
.aur-track__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 38px;
    bottom: 0;
    width: 2px;
    background: var(--aur-line-2);
}
.aur-track__step--done:not(:last-child)::before { background: var(--aur-accent); }
.aur-track__dot {
    width: 36px; height: 36px;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--aur-line-2);
    background: var(--aur-bg-2);
    color: var(--aur-ink-3);
    display: grid; place-items: center;
    font-size: 14px;
    transition: all var(--aur-dur) var(--aur-ease);
}
.aur-track__step--done .aur-track__dot {
    border-color: var(--aur-accent);
    background: var(--aur-accent);
    color: var(--aur-accent-ink);
}
.aur-track__step--active .aur-track__dot {
    border-color: var(--aur-accent);
    color: var(--aur-accent);
    box-shadow: 0 0 0 6px var(--aur-accent-soft);
}
.aur-track__body { padding-top: 6px; }
.aur-track__title { font-weight: 500; color: var(--aur-ink); margin: 0 0 2px 0; }
.aur-track__meta  { font-size: 0.8125rem; color: var(--aur-ink-3); }

/* ==========================================================================
   Tag / chip
   ========================================================================== */
.aur-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 12px;
    border-radius: var(--aur-r-full);
    background: var(--aur-bg-3);
    color: var(--aur-ink-2);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    border: 1px solid var(--aur-line);
}
.aur-tag--accent  { background: var(--aur-accent-soft);  color: var(--aur-accent-bright); border-color: var(--aur-accent-tint); }
.aur-tag--success { background: var(--aur-success-soft); color: #A8E5BE; border-color: rgba(79,192,122,0.25); }
.aur-tag--danger  { background: var(--aur-danger-soft);  color: #FFB5B5; border-color: rgba(227,107,107,0.25); }

/* ==========================================================================
   Utility
   ========================================================================== */
.aur-center { text-align: center; }
.aur-flex   { display: flex; }
.aur-grid   { display: grid; }
.aur-w-full { width: 100%; }
.aur-mt-0   { margin-top: 0; }
.aur-mt-1   { margin-top: var(--aur-s-2); }
.aur-mt-2   { margin-top: var(--aur-s-4); }
.aur-mt-3   { margin-top: var(--aur-s-6); }
.aur-mt-4   { margin-top: var(--aur-s-8); }

.aur-cols-2 { display: grid; grid-template-columns: 1fr; gap: var(--aur-s-4); }
.aur-cols-3 { display: grid; grid-template-columns: 1fr; gap: var(--aur-s-4); }
@media (min-width: 640px) {
    .aur-cols-2 { grid-template-columns: 1fr 1fr; }
    .aur-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}