/* ==========================================================
   site.css — Design Tokens & Shared Styles (UIAll.md)
   ========================================================== */

:root {
    --color-bg-main:       #050505;
    --color-bg-card:       #111111;
    --color-bg-inner:      #0a0a0a;
    --color-border:        #222222;
    --color-border-hover:  #333333;
    --color-accent:        #facc15; /* yellow-400 */
    --color-admin:         #ef4444; /* red-500 */
    --color-success:       #22c55e; /* green-500 */
    --color-text:          #ffffff;
    --color-text-muted:    #9ca3af; /* gray-400 */
    --color-text-faint:    #6b7280; /* gray-500 */
    --font-main: 'Roboto', sans-serif;
}

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

body {
    font-family: var(--font-main);
    background-color: var(--color-bg-main);
    color: var(--color-text);
    margin: 0;
}

/* ── Scrollbar Custom ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-main); }
::-webkit-scrollbar-thumb { background: var(--color-border-hover); border-radius: 3px; }

/* ── Transitions ── */
a, button { transition: color 0.15s, background-color 0.15s, border-color 0.15s; }

/* ── Form Validation ── */
.field-validation-error { color: #ef4444; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.input-validation-error { border-color: #ef4444 !important; }

/* ── Toast Animation ── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.3s ease-out; }

/* ── Modal Slide Up Animation ── */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}