/* PropFlow — Slate Finance (design tokens, phase 1) */

:root {
    color-scheme: light;

    /* Surfaces */
    --pro-bg: #f4f4f5;
    --pro-bg-base: #f4f4f5;
    --pro-surface: #ffffff;
    --pro-surface-elevated: #ffffff;
    --pro-surface-card: #ffffff;
    --pro-surface-muted: #f4f4f5;

    /* Chrome legacy aliases */
    --pro-chrome: #ffffff;
    --pro-chrome-top: #ffffff;
    --pro-chrome-deep: #f4f4f5;
    --pro-chrome-border: #e4e4e7;
    --pro-chrome-shadow: rgba(0, 0, 0, 0.06);
    --pro-chrome-violet-glow: transparent;

    /* Glass / dock */
    --pro-glass: rgba(255, 255, 255, 0.92);
    --pro-glass-strong: #ffffff;
    --pro-glass-border: #e4e4e7;

    /* Borders & text */
    --pro-border: #e4e4e7;
    --pro-border-subtle: #e4e4e7;
    --pro-text: #18181b;
    --pro-text-secondary: #52525b;
    --pro-text-muted: #71717a;

    /* Accent — indigo Slate Finance */
    --pro-accent: #4f46e5;
    --pro-accent-hover: #4338ca;
    --pro-accent-soft: #eef2ff;
    --pro-accent-muted: rgba(79, 70, 229, 0.1);
    --pro-accent-ring: rgba(79, 70, 229, 0.28);
    --pro-accent-glow: rgba(79, 70, 229, 0.12);
    --pro-on-accent: #ffffff;
    --pro-violet: var(--pro-accent);
    --pro-violet-soft: #6366f1;
    --pro-violet-muted: var(--pro-accent-muted);
    --pro-violet-ring: var(--pro-accent-ring);

    /* Controls */
    --pro-control: #52525b;
    --pro-control-hover: #3f3f46;
    --pro-control-muted: rgba(24, 24, 27, 0.06);
    --pro-control-ring: rgba(79, 70, 229, 0.22);
    --pro-control-glow: transparent;

    /* Semantic */
    --pro-success: #16a34a;
    --pro-success-bg: #f0fdf4;
    --pro-success-border: #bbf7d0;
    --pro-danger: #dc2626;
    --pro-danger-bg: #fef2f2;
    --pro-danger-border: #fecaca;
    --pro-warning: #d97706;
    --pro-warning-bg: #fffbeb;
    --pro-warning-border: #fde68a;
    --pro-overlay: rgba(9, 9, 11, 0.45);

    /* Radius & shadow */
    --pro-radius: 12px;
    --pro-radius-lg: 16px;
    --pro-radius-xl: 16px;
    --pro-radius-full: 999px;
    --pro-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --pro-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --pro-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --pro-shadow-card: var(--pro-shadow-sm);
    --pro-shadow-float: var(--pro-shadow);

    /* Type scale */
    --pro-fs-xs: 0.6875rem;
    --pro-fs-sm: 0.75rem;
    --pro-fs-base: 0.875rem;
    --pro-fs-md: 0.9375rem;
    --pro-fs-lg: 1rem;
    --pro-fs-xl: 1.125rem;
    --pro-fs-page-title: 1.375rem;
    --pro-fs-page-title-compact: 1.25rem;
    --pro-space-page: 16px;

    /* Motion */
    --pro-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --pro-duration: 0.18s;

    /* Header chrome (flat) */
    --pro-header-bg: var(--pro-surface-elevated);
    --pro-header-border: var(--pro-border-subtle);
    --pro-header-shadow: none;
    --pro-page-gutter: 16px;
}

html[data-theme="dark"] {
    color-scheme: dark;

    --pro-bg: #09090b;
    --pro-bg-base: #09090b;
    --pro-surface: #18181b;
    --pro-surface-elevated: #18181b;
    --pro-surface-card: #18181b;
    --pro-surface-muted: #27272a;

    --pro-chrome: #18181b;
    --pro-chrome-top: #18181b;
    --pro-chrome-deep: #09090b;
    --pro-chrome-border: #3f3f46;
    --pro-chrome-shadow: rgba(0, 0, 0, 0.35);
    --pro-chrome-violet-glow: transparent;

    --pro-glass: rgba(24, 24, 27, 0.92);
    --pro-glass-strong: #18181b;
    --pro-glass-border: #3f3f46;

    --pro-border: #3f3f46;
    --pro-border-subtle: #3f3f46;
    --pro-text: #fafafa;
    --pro-text-secondary: #d4d4d8;
    --pro-text-muted: #a1a1aa;

    --pro-accent: #818cf8;
    --pro-accent-hover: #a5b4fc;
    --pro-accent-soft: #1e1b4b;
    --pro-accent-muted: rgba(129, 140, 248, 0.14);
    --pro-accent-ring: rgba(129, 140, 248, 0.32);
    --pro-accent-glow: rgba(129, 140, 248, 0.1);
    --pro-on-accent: #fafafa;

    --pro-control: #d4d4d8;
    --pro-control-hover: #e4e4e7;
    --pro-control-muted: rgba(250, 250, 250, 0.06);
    --pro-control-ring: rgba(129, 140, 248, 0.28);

    --pro-success: #22c55e;
    --pro-success-bg: rgba(34, 197, 94, 0.12);
    --pro-success-border: rgba(34, 197, 94, 0.28);
    --pro-danger: #ef4444;
    --pro-danger-bg: rgba(239, 68, 68, 0.12);
    --pro-danger-border: rgba(239, 68, 68, 0.28);
    --pro-warning: #fbbf24;
    --pro-warning-bg: rgba(251, 191, 36, 0.12);
    --pro-warning-border: rgba(251, 191, 36, 0.28);
    --pro-overlay: rgba(0, 0, 0, 0.62);

    --pro-shadow-sm: none;
    --pro-shadow: none;
    --pro-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
    --pro-shadow-card: none;
    --pro-shadow-float: 0 4px 16px rgba(0, 0, 0, 0.4);

    --pro-header-bg: var(--pro-surface-elevated);
    --pro-header-border: var(--pro-border-subtle);
    --pro-header-shadow: none;
}

html,
body {
    background-color: var(--pro-bg-base) !important;
    color: var(--pro-text);
}

.app-container,
.content {
    background-color: var(--pro-bg-base) !important;
}