/*
 * EVOrbit design system — token layer (status 1F).
 * Updated to match Figma specifications (EV orbit UI)
 */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/inter/inter-400.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/inter/inter-500.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/inter/inter-600.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/inter/inter-700.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("/fonts/inter/inter-800.woff2") format("woff2");
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/space-grotesk/sg-500.woff2") format("woff2");
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/space-grotesk/sg-600.woff2") format("woff2");
}

@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/space-grotesk/sg-700.woff2") format("woff2");
}

:root {
    /* ---------------------------------------------------------------- primitives */
    /* Updated to Figma Navy and Emerald scales */
    --cp-palette-blue-50: #f8fafc;
    --cp-palette-blue-100: #f1f5f9;
    --cp-palette-blue-200: #e2e8f0;
    --cp-palette-blue-300: #cbd5e1;
    --cp-palette-blue-400: #94a3b8;
    --cp-palette-blue-500: #64748b;
    --cp-palette-blue-600: #475569;
    --cp-palette-blue-700: #334155;
    --cp-palette-blue-800: #1e293b;
    --cp-palette-blue-900: #0f172a;
    --cp-palette-blue-950: #020617;
    --cp-palette-blue-1000: #000000;
    --cp-palette-accent-300: #93c5fd;
    --cp-palette-accent-400: #60a5fa;
    --cp-palette-accent-500: #3b82f6;
    --cp-palette-accent-600: #2563eb;
    /* Figma Vibrant Green */
    --cp-palette-green-300: #34d399;
    --cp-palette-green-400: #10b981;
    --cp-palette-green-500: #059669;
    --cp-palette-green-600: #047857;
    --cp-palette-green-50: #ecfdf5;
    --cp-palette-amber-400: #fbbf24;
    --cp-palette-amber-500: #f59e0b;
    --cp-palette-amber-50: #fffbeb;
    --cp-palette-red-300: #fca5a5;
    --cp-palette-red-400: #f87171;
    --cp-palette-red-500: #ef4444;
    --cp-palette-red-600: #dc2626;
    --cp-palette-red-50: #fef2f2;
    --cp-palette-neutral-0: #ffffff;
    --cp-palette-neutral-25: #f8fafc;
    --cp-palette-neutral-50: #f1f5f9;
    --cp-palette-neutral-600: #64748b;
    /* ------------------------------------------------------------------ surfaces */
    --cp-surface-page: var(--cp-palette-neutral-50);
    --cp-surface-raised: var(--cp-palette-neutral-0);
    --cp-surface-sunken: var(--cp-palette-blue-100);
    --cp-surface-hover: var(--cp-palette-blue-50);
    --cp-surface-inverse: var(--cp-palette-blue-900);
    --cp-surface-overlay: rgba(15, 23, 42, 0.65);
    /* Sidebar - Deep Navy in both themes per Figma */
    --cp-nav-surface-start: var(--cp-palette-blue-950);
    --cp-nav-surface-end: var(--cp-palette-blue-950);
    --cp-nav-text: var(--cp-palette-blue-400);
    --cp-nav-text-muted: var(--cp-palette-blue-500);
    --cp-nav-text-hover: var(--cp-palette-blue-50);
    --cp-nav-surface-hover: rgba(255, 255, 255, 0.05);
    --cp-nav-active: var(--cp-palette-green-400);
    --cp-nav-active-text: var(--cp-palette-green-400);
    --cp-nav-active-soft-start: rgba(16, 185, 129, 0.1);
    --cp-nav-active-soft-end: rgba(16, 185, 129, 0.02);
    --cp-nav-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    /* ---------------------------------------------------------------------- text */
    --cp-text-primary: var(--cp-palette-blue-900);
    --cp-text-secondary: var(--cp-palette-blue-600);
    --cp-text-muted: var(--cp-palette-blue-500);
    --cp-text-inverse: var(--cp-palette-neutral-0);
    --cp-text-accent: var(--cp-palette-accent-500);
    /* ------------------------------------------------------------------- borders */
    --cp-border-subtle: var(--cp-palette-blue-200);
    --cp-border-strong: var(--cp-palette-neutral-600);
    --cp-border-inverse: var(--cp-palette-blue-800);
    /* -------------------------------------------------------------------- intent */
    --cp-accent: var(--cp-palette-accent-500);
    --cp-accent-hover: var(--cp-palette-accent-600);
    --cp-accent-contrast: var(--cp-palette-neutral-0);
    --cp-accent-soft: var(--cp-palette-blue-50);
    --cp-success: var(--cp-palette-green-500);
    --cp-success-soft: var(--cp-palette-green-50);
    --cp-success-contrast: var(--cp-palette-neutral-0);
    --cp-success-border: rgba(16, 185, 129, 0.45);
    --cp-warning: var(--cp-palette-amber-500);
    --cp-warning-soft: var(--cp-palette-amber-50);
    --cp-warning-contrast: var(--cp-palette-blue-1000);
    --cp-danger: var(--cp-palette-red-500);
    --cp-danger-hover: var(--cp-palette-red-600);
    --cp-danger-soft: var(--cp-palette-red-50);
    --cp-danger-contrast: var(--cp-palette-neutral-0);
    --cp-danger-border: rgba(239, 68, 68, 0.45);
    --cp-control-disabled-surface: var(--cp-palette-neutral-50);
    --cp-control-disabled-border: var(--cp-palette-blue-100);
    --cp-control-disabled-text: var(--cp-palette-blue-400);
    /* --------------------------------------------------------------------- focus */
    --cp-focus-ring: 0 0 0 2px rgba(16, 185, 129, 0.45);
    --cp-focus-outline: 2px solid var(--cp-accent);
    /* ----------------------------------------------------------------- elevation */
    --cp-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
    --cp-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --cp-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
    /* -------------------------------------------------------------------- shape */
    /* Increased radiuses to match Figma's rounded card aesthetic */
    --cp-radius-sm: 8px;
    --cp-radius-md: 16px;
    --cp-radius-lg: 24px;
    --cp-radius-pill: 999px;
    /* ------------------------------------------------------------------ spacing */
    --cp-space-1: 4px;
    --cp-space-2: 8px;
    --cp-space-3: 12px;
    --cp-space-4: 16px;
    --cp-space-5: 24px;
    --cp-space-6: 32px;
    --cp-space-7: 48px;
    --cp-space-8: 64px;
    /* ---------------------------------------------------------------- typography */
    --cp-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --cp-font-display: "Space Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
    --cp-font-mono: "Cascadia Mono", Consolas, monospace;
    --cp-font-size-xs: 11px;
    --cp-font-size-sm: 13px;
    --cp-font-size-base: 14px;
    --cp-font-size-md: 16px;
    --cp-font-size-lg: 20px;
    --cp-font-size-xl: 26px;
    --cp-font-size-2xl: 34px;
    --cp-weight-regular: 400;
    --cp-weight-medium: 500;
    --cp-weight-semibold: 600;
    --cp-weight-bold: 700;
    --cp-leading-tight: 1.25;
    --cp-leading-normal: 1.5;
    /* ------------------------------------------------------------------- motion */
    --cp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --cp-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* 
 * Dark theme matching Figma's exact navy background
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-cp-theme="light"]) {
        --cp-surface-page: var(--cp-palette-blue-950);
        --cp-surface-raised: var(--cp-palette-blue-900);
        --cp-surface-sunken: var(--cp-palette-blue-1000);
        --cp-surface-hover: var(--cp-palette-blue-800);
        --cp-surface-inverse: var(--cp-palette-neutral-0);
        --cp-surface-overlay: rgba(2, 6, 23, 0.8);
        --cp-text-primary: var(--cp-palette-neutral-0);
        --cp-text-secondary: var(--cp-palette-blue-300);
        --cp-text-muted: var(--cp-palette-blue-400);
        --cp-text-inverse: var(--cp-palette-blue-950);
        --cp-text-accent: var(--cp-palette-accent-400);
        --cp-border-subtle: rgba(255, 255, 255, 0.06);
        --cp-border-strong: var(--cp-palette-blue-700);
        --cp-border-inverse: var(--cp-palette-blue-200);
        --cp-accent: var(--cp-palette-accent-500);
        --cp-accent-hover: var(--cp-palette-accent-400);
        --cp-accent-contrast: var(--cp-palette-neutral-0);
        --cp-accent-soft: rgba(59, 130, 246, 0.15);
        --cp-success: var(--cp-palette-green-400);
        --cp-success-soft: rgba(16, 185, 129, 0.15);
        --cp-success-contrast: var(--cp-palette-blue-1000);
        --cp-success-border: rgba(16, 185, 129, 0.3);
        --cp-warning: var(--cp-palette-amber-400);
        --cp-warning-soft: rgba(245, 158, 11, 0.15);
        --cp-warning-contrast: var(--cp-palette-blue-1000);
        --cp-danger: var(--cp-palette-red-400);
        --cp-danger-hover: var(--cp-palette-red-300);
        --cp-danger-soft: rgba(239, 68, 68, 0.15);
        --cp-danger-contrast: var(--cp-palette-blue-1000);
        --cp-danger-border: rgba(239, 68, 68, 0.3);
        --cp-control-disabled-surface: var(--cp-palette-blue-900);
        --cp-control-disabled-border: var(--cp-palette-blue-800);
        --cp-control-disabled-text: var(--cp-palette-blue-500);
        --cp-focus-ring: 0 0 0 2px rgba(16, 185, 129, 0.55);
        --cp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --cp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
        --cp-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
    }
}

:root[data-cp-theme="dark"] {
    --cp-surface-page: var(--cp-palette-blue-950);
    --cp-surface-raised: var(--cp-palette-blue-900);
    --cp-surface-sunken: var(--cp-palette-blue-1000);
    --cp-surface-hover: var(--cp-palette-blue-800);
    --cp-surface-inverse: var(--cp-palette-neutral-0);
    --cp-surface-overlay: rgba(2, 6, 23, 0.8);
    --cp-text-primary: var(--cp-palette-neutral-0);
    --cp-text-secondary: var(--cp-palette-blue-300);
    --cp-text-muted: var(--cp-palette-blue-400);
    --cp-text-inverse: var(--cp-palette-blue-950);
    --cp-text-accent: var(--cp-palette-accent-400);
    --cp-border-subtle: rgba(255, 255, 255, 0.06);
    --cp-border-strong: var(--cp-palette-blue-700);
    --cp-border-inverse: var(--cp-palette-blue-200);
    --cp-accent: var(--cp-palette-accent-500);
    --cp-accent-hover: var(--cp-palette-accent-400);
    --cp-accent-contrast: var(--cp-palette-neutral-0);
    --cp-accent-soft: rgba(59, 130, 246, 0.15);
    --cp-success: var(--cp-palette-green-400);
    --cp-success-soft: rgba(16, 185, 129, 0.15);
    --cp-success-contrast: var(--cp-palette-blue-1000);
    --cp-success-border: rgba(16, 185, 129, 0.3);
    --cp-warning: var(--cp-palette-amber-400);
    --cp-warning-soft: rgba(245, 158, 11, 0.15);
    --cp-warning-contrast: var(--cp-palette-blue-1000);
    --cp-danger: var(--cp-palette-red-400);
    --cp-danger-hover: var(--cp-palette-red-300);
    --cp-danger-soft: rgba(239, 68, 68, 0.15);
    --cp-danger-contrast: var(--cp-palette-blue-1000);
    --cp-danger-border: rgba(239, 68, 68, 0.3);
    --cp-control-disabled-surface: var(--cp-palette-blue-900);
    --cp-control-disabled-border: var(--cp-palette-blue-800);
    --cp-control-disabled-text: var(--cp-palette-blue-500);
    --cp-focus-ring: 0 0 0 2px rgba(16, 185, 129, 0.55);
    --cp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --cp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --cp-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
}

*, *::before, *::after {
    box-sizing: border-box;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --cp-transition-fast: 0ms;
        --cp-transition-base: 0ms;
    }
}

:focus-visible {
    outline: var(--cp-focus-outline);
    outline-offset: 2px;
}

.cp-depth-0 {
    --permission-depth: 0;
}

.cp-depth-1 {
    --permission-depth: 1;
}

.cp-depth-2 {
    --permission-depth: 2;
}