/* ============================================================
   Review Board — Design System
   2T5 Film visual language: warm beige + red accents + blacks
   ============================================================ */

:root {
    /* Background layers — 2T5 light: beige/paper */
    --rb-bg-app: #f5f1ec;
    --rb-bg-surface: #ece8e1;
    --rb-bg-elevated: #ffffff;
    --rb-bg-hover: #eae5dd;
    --rb-bg-canvas: #f5f1ec;

    /* Text — dark warm */
    --rb-text-primary: #1a1815;
    --rb-text-secondary: #5c5650;
    --rb-text-muted: #8a847c;

    /* Accent — 2T5 brand red */
    --rb-accent: #b85450;
    --rb-accent-rgb: 184, 84, 80;
    --rb-accent-hover: #9a3e3b;
    --rb-accent-subtle: rgba(184, 84, 80, 0.08);

    /* Status */
    --rb-success: #16a34a;
    --rb-warning: #ca8a04;
    --rb-error: #dc2626;  /* Distinct from accent #b85450 */

    /* Borders — warm */
    --rb-border: rgba(10, 9, 8, 0.10);
    --rb-border-subtle: rgba(10, 9, 8, 0.06);

    /* Shadows */
    --rb-shadow-sm: 0 1px 3px rgba(10, 9, 8, 0.06);
    --rb-shadow-md: 0 4px 12px rgba(10, 9, 8, 0.10);
    --rb-shadow-lg: 0 8px 30px rgba(10, 9, 8, 0.12);

    /* Radii */
    --rb-radius-sm: 6px;
    --rb-radius-md: 10px;
    --rb-radius-lg: 16px;

    /* Transitions */
    --rb-transition: 0.15s ease;

    /* Z-index layers */
    --rb-z-canvas: 1;
    --rb-z-elements: 10;
    --rb-z-toolbar: 100;
    --rb-z-topbar: 100;
    --rb-z-sidebar: 100;
    --rb-z-modal: 1000;
    --rb-z-toast: 2000;

    /* Typography */
    --rb-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --rb-font-mono: 'SF Mono', 'Fira Code', monospace;
    --rb-font-size-xs: 11px;
    --rb-font-size-sm: 13px;
    --rb-font-size-md: 15px;
    --rb-font-size-lg: 18px;
    --rb-font-size-xl: 24px;
}

/* ---- Dark Mode ---- */
body.dark {
    --rb-bg-app: #0a0908;
    --rb-bg-surface: #1a1815;
    --rb-bg-elevated: #252220;
    --rb-bg-hover: #2a2724;
    --rb-bg-canvas: #1a1815;

    --rb-text-primary: #e8e4df;
    --rb-text-secondary: #a09a93;
    --rb-text-muted: #6b665f;

    --rb-accent-hover: #c97a77;
    --rb-accent-subtle: rgba(184, 84, 80, 0.12);

    --rb-border: rgba(245, 241, 236, 0.10);
    --rb-border-subtle: rgba(245, 241, 236, 0.06);

    --rb-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
    --rb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --rb-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ---- Global Reset ---- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: var(--rb-font);
    font-size: var(--rb-font-size-md);
    color: var(--rb-text-primary);
    background: var(--rb-bg-app);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--rb-bg-surface);
}

::-webkit-scrollbar-thumb {
    background: var(--rb-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--rb-text-muted);
}

a {
    color: var(--rb-accent);
    text-decoration: none;
}

a:hover {
    color: var(--rb-accent-hover);
}