/* ============================================================
   Design tokens — single source of truth for the new UI.
   Ported from the RpsCRM design system. Colours, shadows and
   surfaces are all referenced via these custom properties so
   light/dark theming is a single [data-theme] switch.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --brand: #E30613;            /* RPS red */
    --brand-hover: #c0000f;

    --text: #111827;
    --muted: #6B7280;
    --card: #ffffff;
    --bg: #f6f7fb;               /* app background (cool off-white) */
    --border: #e5e7eb;

    --sidebar-bg: #1a1d2e;       /* dark navy sidebar (light mode too) */
    --sidebar-text: #e5e7eb;
    --sidebar-muted: #9ca3af;
    --sidebar-hover: rgba(255,255,255,0.08);
    --sidebar-active: rgba(227,6,19,0.15);
    --sidebar-border: rgba(255,255,255,0.1);

    --input-bg: #ffffff;
    --modal-bg: #ffffff;
    --backdrop: rgba(0,0,0,0.3);

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
}

/* Dark theme — currently DORMANT: the UI toggle was removed until the
   remaining icons/assets are made dark-mode safe. Kept here so dark mode
   can be re-enabled later by re-adding a [data-theme] switch. */
[data-theme="dark"] {
    --brand: #F04550;            /* lightened for contrast on dark */
    --brand-hover: #d93540;

    --text: #e5e7eb;
    --muted: #9ca3af;
    --card: #1e1e2e;
    --bg: #121218;
    --border: #2e2e3e;

    --sidebar-bg: #0f111a;
    --sidebar-text: #e5e7eb;
    --sidebar-muted: #9ca3af;
    --sidebar-hover: rgba(255,255,255,0.08);
    --sidebar-active: rgba(240,69,80,0.15);
    --sidebar-border: rgba(255,255,255,0.1);

    --input-bg: #1e1e2e;
    --modal-bg: #1e1e2e;
    --backdrop: rgba(0,0,0,0.6);
}

/* Base typography — Inter, matching the reference design. */
html {
    font-size: 14px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}