/**
 * Scoop Labs Design Tokens
 * Single source of truth for light + dark themes.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&display=swap');

:root,
[data-theme="light"] {
    /* Brand */
    --sl-primary: #0c7c77;
    --sl-primary-strong: #0a625e;
    --sl-primary-soft: rgba(12, 124, 119, 0.12);
    --sl-primary-muted: rgba(12, 124, 119, 0.08);
    --sl-accent: #f7941d;
    --sl-accent-soft: rgba(247, 148, 29, 0.14);

    /* Surfaces */
    --sl-bg: #f3f6f5;
    --sl-surface: #ffffff;
    --sl-surface-elevated: #ffffff;
    --sl-surface-muted: #eef2f1;
    --sl-sidebar: #ffffff;
    --sl-sidebar-hover: #f0f4f3;
    --sl-header: #ffffff;
    --sl-overlay: rgba(15, 20, 22, 0.45);

    /* Text */
    --sl-text: #14181a;
    --sl-text-secondary: #3d474c;
    --sl-muted: #667085;
    --sl-text-inverse: #ffffff;
    --sl-text-on-primary: #ffffff;

    /* Borders */
    --sl-border: #e6e9ea;
    --sl-border-strong: #d3d8da;
    --sl-border-subtle: rgba(20, 24, 26, 0.06);

    /* Semantic */
    --sl-success: #067647;
    --sl-success-bg: #ecfdf3;
    --sl-success-border: #abefc6;
    --sl-warning: #b54708;
    --sl-warning-bg: #fffaeb;
    --sl-warning-border: #fedf89;
    --sl-danger: #b42318;
    --sl-danger-bg: #fef3f2;
    --sl-danger-border: #fecdca;
    --sl-info: #0c7c77;
    --sl-info-bg: #eef8f7;

    /* Elevation */
    --sl-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
    --sl-shadow-md: 0 4px 16px -4px rgba(16, 24, 40, 0.1);
    --sl-shadow-lg: 0 12px 32px -12px rgba(16, 24, 40, 0.16);

    /* Radius */
    --sl-radius-sm: 6px;
    --sl-radius-md: 10px;
    --sl-radius-lg: 14px;
    --sl-radius-xl: 18px;

    /* Motion */
    --sl-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --sl-duration: 160ms;
    --sl-duration-slow: 240ms;

    /* Layout chrome */
    --sidebar-width: 220px;
    --sidebar-width-collapsed: 60px;
    --header-height: 52px;

    /* Typography */
    --sl-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sl-text-xs: 0.75rem;
    --sl-text-sm: 0.8125rem;
    --sl-text-base: 0.875rem;
    --sl-text-md: 0.9375rem;
    --sl-text-lg: 1.125rem;
    --sl-text-xl: 1.375rem;
    --sl-text-2xl: 1.625rem;
    --sl-leading: 1.5;
    --sl-tracking: -0.01em;

    /* Legacy aliases (map old names → new system) */
    --primary-blue: var(--sl-primary);
    --dark-bg: var(--sl-header);
    --sidebar-bg: var(--sl-sidebar);
    --sidebar-hover: var(--sl-sidebar-hover);
    --white: var(--sl-surface);
    --text-dark: var(--sl-text);
}

[data-theme="dark"] {
    --sl-primary: #2bb5ae;
    --sl-primary-strong: #3ec9c2;
    --sl-primary-soft: rgba(43, 181, 174, 0.18);
    --sl-primary-muted: rgba(43, 181, 174, 0.1);
    --sl-accent: #f9a94a;
    --sl-accent-soft: rgba(249, 169, 74, 0.16);

    --sl-bg: #0f1416;
    --sl-surface: #161c1e;
    --sl-surface-elevated: #1c2326;
    --sl-surface-muted: #1a2124;
    --sl-sidebar: #12181a;
    --sl-sidebar-hover: #1a2225;
    --sl-header: #12181a;
    --sl-overlay: rgba(0, 0, 0, 0.6);

    --sl-text: #e8eceb;
    --sl-text-secondary: #c2cbc9;
    --sl-muted: #8a9694;
    --sl-text-inverse: #0f1416;
    --sl-text-on-primary: #0f1416;

    --sl-border: #2a3336;
    --sl-border-strong: #3a4548;
    --sl-border-subtle: rgba(232, 236, 235, 0.06);

    --sl-success: #3dd68c;
    --sl-success-bg: rgba(6, 118, 71, 0.2);
    --sl-success-border: rgba(61, 214, 140, 0.35);
    --sl-warning: #f5a524;
    --sl-warning-bg: rgba(181, 71, 8, 0.2);
    --sl-warning-border: rgba(245, 165, 36, 0.35);
    --sl-danger: #f07067;
    --sl-danger-bg: rgba(180, 35, 24, 0.2);
    --sl-danger-border: rgba(240, 112, 103, 0.35);
    --sl-info: #2bb5ae;
    --sl-info-bg: rgba(43, 181, 174, 0.14);

    --sl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --sl-shadow-md: 0 4px 16px -4px rgba(0, 0, 0, 0.45);
    --sl-shadow-lg: 0 12px 32px -12px rgba(0, 0, 0, 0.55);

    --primary-blue: var(--sl-primary);
    --dark-bg: var(--sl-header);
    --sidebar-bg: var(--sl-sidebar);
    --sidebar-hover: var(--sl-sidebar-hover);
    --white: var(--sl-surface);
    --text-dark: var(--sl-text);
}

html {
    color-scheme: light;
}

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

body {
    font-family: var(--sl-font);
    font-size: var(--sl-text-base);
    line-height: var(--sl-leading);
    letter-spacing: var(--sl-tracking);
    color: var(--sl-text);
    background-color: var(--sl-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}