/* Design System Tokens - eSmart Dark Theme */
/* Note: Inter font is loaded via <link> in HTML for non-blocking performance */

:root {
    /* === Backgrounds (eSmart palette) === */
    --bg-app: #0b0e0e;           /* Deep dark */
    --bg-pane: #0f1313;          /* Panel background */
    --bg-panel: #141919;         /* Elevated panels */
    --bg-card: #141919;          /* Card background */
    --bg-input: #141919;         /* Input background */
    --bg-appbar: #0f1313;        /* App bar */
    --bg-hover: #1a2020;         /* Hover state */
    --bg-selected: #256363;      /* Selected state (teal-700) */

    /* === Glassmorphism === */
    --glass-bg: rgba(20, 25, 25, 0.7);
    --glass-bg-light: rgba(20, 25, 25, 0.6);
    --glass-blur: blur(16px);
    --glass-border: rgba(57, 151, 151, 0.2);

    /* === Primary/Accent (eSmart teal) === */
    --primary: #399797;          /* Teal-500 */
    --primary-light: #4fb8b8;    /* Teal-400 */
    --primary-hover: #2d7a7a;    /* Teal-600 */
    --primary-dark: #256363;     /* Teal-700 */
    --primary-subtle: rgba(57, 151, 151, 0.1);
    --primary-glow: rgba(57, 151, 151, 0.3);

    /* === Teal palette (for direct color references) === */
    --teal-300: #b0e3e3;
    --teal-400: #4fb8b8;
    --teal-500: #399797;
    --teal-600: #2d7a7a;
    --teal-700: #256363;

    /* === Semantic aliases (used by landing/pipeline) === */
    --border-primary: var(--teal-500);
    --hover-primary: rgba(176, 227, 227, 0.1);

    /* === Text (eSmart palette) === */
    --text-high: #f0f1f1;        /* Primary text */
    --text-medium: #c5c9c9;      /* Secondary text */
    --text-subtle: #9ca3a3;      /* Muted text */
    --text-disabled: #525252;    /* Disabled text */
    --text-inverse: #0b0e0e;     /* Inverse text */

    /* === Borders === */
    --border-divider: #2a3232;   /* Divider lines */
    --border-section: #3a4444;   /* Section borders */
    --border-input: #2a3232;     /* Input borders */
    --border-selected: #4fb8b8;  /* Selected borders (teal-400) */
    --border-focus: #4fb8b8;     /* Focus borders (teal-400) */

    /* === Status === */
    --error: #ef4444;            /* Red.500 */
    --warning: #f59e0b;          /* Amber.500 */
    --success: #22c55e;          /* Green.500 */
    --info: #3b82f6;             /* Blue.500 */

    /* === Spacing === */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;

    /* === Typography (Inter) === */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --font-mono: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-md: 15px;        /* Increased from 14px */
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 24px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* === Border Radius === */
    --radius-sm: 4px;
    --radius-md: 8px;            /* Updated for buttons */
    --radius-lg: 12px;           /* Updated for cards */
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* === Surface layering === */
    --bg-surface-0: var(--bg-app);      /* #0b0e0e - deepest */
    --bg-surface-1: #111616;            /* Raised */
    --bg-surface-2: #161c1c;            /* Cards/elevated */
    --bg-surface-3: #1c2323;            /* Highest: popovers, menus */

    /* === Card borders === */
    --border-card: #1f2828;
    --border-card-hover: var(--teal-600);

    /* === Score colors (softer palette) === */
    --score-high: #34d399;
    --score-medium: #fbbf24;
    --score-low: #f87171;
    --score-high-bg: rgba(52, 211, 153, 0.12);
    --score-medium-bg: rgba(251, 191, 36, 0.12);
    --score-low-bg: rgba(248, 113, 113, 0.12);

    /* === Shadows === */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px var(--primary-glow);

    /* === Transitions === */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;

    /* === Layout === */
    --appbar-height: 60px;
    --sidebar-width: 280px;
    --thumbnail-size: 300px;
}