/* ═══════════════════════════════════════════════════════════════
   ROMPODA STATS — Design tokens
   Inspired by Mercury / Stripe with Rompoda blue identity
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ─── Colors: Brand ─────────────────────────────── */
    --rs-primary: #2563EB;
    --rs-primary-dark: #1D4ED8;
    --rs-primary-light: #60A5FA;
    --rs-primary-soft: #DBEAFE;
    --rs-primary-bg: #EFF6FF;
    --rs-primary-50: #F5F9FF;

    /* ─── Colors: Accent ────────────────────────────── */
    --rs-secondary: #06B6D4;
    --rs-accent: #f8982e;
    --rs-accent-dark: #e07d10;

    /* ─── Colors: Neutral grays ────────────────────── */
    --rs-dark: #0F172A;
    --rs-g900: #1E293B;
    --rs-g800: #334155;
    --rs-g700: #475569;
    --rs-g600: #64748B;
    --rs-g500: #94A3B8;
    --rs-g400: #CBD5E1;
    --rs-g300: #E2E8F0;
    --rs-g200: #F1F5F9;
    --rs-g100: #F8FAFC;
    --rs-white: #FFFFFF;

    /* ─── Colors: Semantic ─────────────────────────── */
    --rs-success: #10B981;
    --rs-success-bg: #ECFDF5;
    --rs-success-border: #A7F3D0;
    --rs-error: #EF4444;
    --rs-error-bg: #FEF2F2;
    --rs-error-border: #FECACA;
    --rs-warning: #F59E0B;
    --rs-warning-bg: #FEF3C7;
    --rs-warning-border: #FDE68A;
    --rs-info: #3B82F6;
    --rs-info-bg: #EFF6FF;

    /* ─── Backgrounds ──────────────────────────────── */
    --rs-bg-canvas: #FAFBFC;
    --rs-bg-surface: #FFFFFF;
    --rs-bg-sidebar: #FAFAFA;
    --rs-bg-sidebar-hover: #F1F5F9;
    --rs-bg-overlay: rgba(15, 23, 42, 0.4);

    /* ─── Borders ──────────────────────────────────── */
    --rs-border: #E2E8F0;
    --rs-border-soft: #F1F5F9;
    --rs-border-strong: #CBD5E1;
    --rs-border-focus: #2563EB;

    /* ─── Gradients ────────────────────────────────── */
    --rs-gradient-blue: linear-gradient(135deg, #DBEAFE 0%, #EFF6FF 100%);
    --rs-gradient-blue-strong: linear-gradient(135deg, #2563EB 0%, #60A5FA 100%);
    --rs-gradient-card: linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
    --rs-gradient-soft: linear-gradient(135deg, #F5F9FF 0%, #FFFFFF 100%);

    /* ─── Typography ───────────────────────────────── */
    --rs-font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --rs-font-display: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
    --rs-font-mono: "SF Mono", "Monaco", "Cascadia Mono", "Roboto Mono", monospace;

    --rs-text-xs: 11px;
    --rs-text-sm: 13px;
    --rs-text-base: 14px;
    --rs-text-md: 15px;
    --rs-text-lg: 16px;
    --rs-text-xl: 18px;
    --rs-text-2xl: 22px;
    --rs-text-3xl: 28px;
    --rs-text-4xl: 36px;
    --rs-text-display: 48px;

    --rs-leading-tight: 1.2;
    --rs-leading-snug: 1.4;
    --rs-leading-normal: 1.5;
    --rs-leading-relaxed: 1.65;

    --rs-weight-regular: 400;
    --rs-weight-medium: 500;
    --rs-weight-semibold: 600;
    --rs-weight-bold: 700;

    /* ─── Spacing ──────────────────────────────────── */
    --rs-space-0: 0;
    --rs-space-1: 4px;
    --rs-space-2: 8px;
    --rs-space-3: 12px;
    --rs-space-4: 16px;
    --rs-space-5: 20px;
    --rs-space-6: 24px;
    --rs-space-7: 28px;
    --rs-space-8: 32px;
    --rs-space-10: 40px;
    --rs-space-12: 48px;
    --rs-space-16: 64px;
    --rs-space-20: 80px;
    --rs-space-24: 96px;

    /* ─── Radius ───────────────────────────────────── */
    --rs-radius-sm: 6px;
    --rs-radius-md: 8px;
    --rs-radius-lg: 12px;
    --rs-radius-xl: 16px;
    --rs-radius-2xl: 20px;
    --rs-radius-full: 9999px;

    /* ─── Shadows (base #0F172A, never pure black) ─ */
    --rs-shadow-xs: 0 1px 2px rgba(15, 23, 42, .04);
    --rs-shadow-sm: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
    --rs-shadow-md: 0 4px 6px rgba(15, 23, 42, .07), 0 2px 4px rgba(15, 23, 42, .04);
    --rs-shadow-lg: 0 10px 15px rgba(15, 23, 42, .08), 0 4px 6px rgba(15, 23, 42, .04);
    --rs-shadow-xl: 0 20px 25px rgba(15, 23, 42, .12), 0 8px 10px rgba(15, 23, 42, .06);
    --rs-shadow-2xl: 0 25px 50px rgba(15, 23, 42, .15);
    --rs-shadow-focus: 0 0 0 3px rgba(37, 99, 235, .15);

    /* ─── Animations ───────────────────────────────── */
    --rs-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --rs-transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --rs-transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ─── Layout ───────────────────────────────────── */
    --rs-sidebar-w: 240px;
    --rs-sidebar-w-collapsed: 64px;
    --rs-topbar-h: 56px;
    --rs-content-max: 1440px;
    --rs-z-sticky: 100;
    --rs-z-overlay: 200;
    --rs-z-modal: 300;
    --rs-z-tooltip: 400;
    --rs-z-toast: 500;
}

/* Reset minimal */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--rs-font-sans);
    font-size: var(--rs-text-base);
    line-height: var(--rs-leading-normal);
    color: var(--rs-g800);
    background: var(--rs-bg-canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
}
button { font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; margin: 0; }
img, svg { display: block; max-width: 100%; }