/* ==========================================================================
   theme.css - shared design tokens for the whole system (kiosk + admin)
   ========================================================================== */
:root {
    --brand-50:  #e9faf3;
    --brand-100: #c9f3e0;
    --brand-400: #1fbf82;
    --brand-500: #04AA6D;
    --brand-600: #039260;
    --brand-700: #027a4f;
    --ink-900: #0f1b16;
    --ink-700: #33413c;
    --ink-500: #667069;
    --surface: #ffffff;
    --surface-alt: #f4f8f6;
    --border: #e4ece8;
    --danger: #e5484d;
    --warning: #f2a33c;
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --shadow-sm: 0 2px 8px rgba(15, 27, 22, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 27, 22, 0.10);
    --shadow-lg: 0 20px 45px rgba(15, 27, 22, 0.16);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

[data-theme="dark"] {
    --surface: #101915;
    --surface-alt: #17221c;
    --border: #223229;
    --ink-900: #f2f7f4;
    --ink-700: #cbd8d1;
    --ink-500: #8fa197;
}

* { box-sizing: border-box; }

body.rpis {
    font-family: var(--font-sans);
    background: var(--surface-alt);
    color: var(--ink-900);
}

.rpis-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.badge-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-status.active   { background: var(--brand-100); color: var(--brand-700); }
.badge-status.inactive { background: #fdecec; color: var(--danger); }
.badge-status.archived { background: #eee; color: var(--ink-500); }

.btn-brand {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
}
.btn-brand:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

.skeleton {
    background: linear-gradient(90deg, var(--border) 25%, var(--surface-alt) 37%, var(--border) 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-loading {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.toast-stack {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}