/*
 * LASA Design System Tokens
 * -----------------------------------------------------------------------------
 * Centralized collection of design tokens (colors, spacing, typography, shadows,
 * etc.) consumed by all LASA UI surfaces. These leverage CSS custom properties so
 * that legacy stylesheets can progressively adopt the new system without breaking.
 */
:root {
    color-scheme: light;

    /* Typography */
    --ds-font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ds-font-family-heading: var(--ds-font-family-sans);
    --ds-font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --ds-font-size-root: 14px;
    --ds-font-size-xs: 0.75rem;     /* 12px - labels, meta */
    --ds-font-size-sm: 0.875rem;    /* 14px - body, compact */
    --ds-font-size-md: 1rem;        /* 16px - standard body */
    --ds-font-size-lg: 1.125rem;    /* 18px - subheadings */
    --ds-font-size-xl: 1.5rem;      /* 24px - headings */
    --ds-font-size-2xl: 2rem;       /* 32px - page titles */

    --ds-line-height-tight: 1.2;
    --ds-line-height-snug: 1.25;    /* For compact components */
    --ds-line-height-normal: 1.5;
    --ds-line-height-relaxed: 1.7;

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

    /* Spacing scale (4px base) */
    --ds-space-0: 0rem;
    --ds-space-1: 0.25rem;      /* 4px */
    --ds-space-2: 0.5rem;       /* 8px */
    --ds-space-3: 0.75rem;      /* 12px */
    --ds-space-4: 1rem;         /* 16px */
    --ds-space-5: 1.5rem;       /* 24px */
    --ds-space-6: 2rem;         /* 32px */
    --ds-space-7: 2.5rem;       /* 40px */
    --ds-space-8: 3rem;         /* 48px */
    --ds-space-9: 3.5rem;       /* 56px */
    --ds-space-10: 4rem;        /* 64px */

    /* Compact spacing scale (for denser UIs) */
    --ds-space-3xs: 0.125rem;   /* 2px - minimal gaps */
    --ds-space-2xs: 0.25rem;    /* 4px - tight spacing */
    --ds-space-xs: 0.5rem;      /* 8px - compact default */
    --ds-space-sm: 0.75rem;     /* 12px - small breathing room */
    --ds-space-md: 1rem;        /* 16px - standard spacing */
    --ds-space-lg: 1.5rem;      /* 24px - section spacing */
    --ds-space-xl: 2rem;        /* 32px - major sections */
    --ds-space-2xl: 3rem;       /* 48px - page sections */

    /* Component-specific spacing presets */
    --card-padding: var(--ds-space-sm);
    --card-gap: var(--ds-space-xs);
    --form-field-gap: var(--ds-space-sm);
    --section-gap: var(--ds-space-lg);
    --page-padding: var(--ds-space-md);
    --table-cell-padding-y: var(--ds-space-xs);
    --table-cell-padding-x: var(--ds-space-sm);
    --widget-padding: var(--ds-space-sm);
    --widget-gap: var(--ds-space-md);

    /* Border radius */
    --ds-radius-xs: 0.25rem;
    --ds-radius-sm: 0.375rem;
    --ds-radius-md: 0.5rem;
    --ds-radius-lg: 0.75rem;
    --ds-radius-xl: 1.25rem;
    --ds-radius-pill: 9999px;

    /* Shadows */
    --ds-shadow-xs: 0 1px 1px rgb(15 23 42 / 0.04);
    --ds-shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.08);
    --ds-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.1), 0 2px 4px -2px rgb(15 23 42 / 0.1);
    --ds-shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.15), 0 4px 6px -4px rgb(15 23 42 / 0.12);
    --ds-shadow-focus: 0 0 0 3px rgb(37 99 235 / 0.25);

    /* Transitions */
    --ds-transition-base: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Core palette */
    --ds-color-primary-50: #eff6ff;
    --ds-color-primary-100: #dbeafe;
    --ds-color-primary-200: #bfdbfe;
    --ds-color-primary-300: #93c5fd;
    --ds-color-primary-400: #60a5fa;
    --ds-color-primary-500: #2563eb;
    --ds-color-primary-600: #1d4ed8;
    --ds-color-primary-700: #1e40af;

    --ds-color-neutral-0: #ffffff;
    --ds-color-neutral-50: #f8fafc;
    --ds-color-neutral-100: #f1f5f9;
    --ds-color-neutral-200: #e2e8f0;
    --ds-color-neutral-300: #cbd5f5;
    --ds-color-neutral-400: #94a3b8;
    --ds-color-neutral-500: #64748b;
    --ds-color-neutral-600: #475569;
    --ds-color-neutral-700: #334155;
    --ds-color-neutral-800: #1e293b;
    --ds-color-neutral-900: #0f172a;

    --ds-color-success-500: #059669;
    --ds-color-warning-500: #d97706;
    --ds-color-danger-500: #dc2626;
    --ds-color-info-500: #0ea5e9;

    /* Derived tokens */
    --ds-color-primary: var(--ds-color-primary-500);
    --ds-color-primary-contrast: #ffffff;

    --ds-color-text-primary: var(--ds-color-neutral-900);
    --ds-color-text-secondary: var(--ds-color-neutral-600);
    --ds-color-text-inverse: #ffffff;

    --ds-color-border: var(--ds-color-neutral-200);
    --ds-color-border-strong: var(--ds-color-neutral-300);

    --ds-color-surface: var(--ds-color-neutral-0);
    --ds-color-surface-alt: var(--ds-color-neutral-50);
    --ds-color-surface-elevated: rgba(255, 255, 255, 0.95);
    --ds-color-backdrop: rgb(15 23 42 / 0.5);

    --ds-gradient-page: linear-gradient(135deg, var(--ds-color-neutral-50) 0%, var(--ds-color-neutral-200) 100%);

    --ds-focus-ring: 0 0 0 3px rgb(37 99 235 / 0.35);

    /* Legacy aliases (progressive enhancement) */
    --primary-color: var(--ds-color-primary);
    --primary-dark: var(--ds-color-primary-600);
    --secondary-color: var(--ds-color-neutral-500);
    --success-color: var(--ds-color-success-500);
    --warning-color: var(--ds-color-warning-500);
    --danger-color: var(--ds-color-danger-500);
    --dark-color: var(--ds-color-neutral-800);
    --light-color: var(--ds-color-neutral-50);
    --border-color: var(--ds-color-border);
    --shadow-sm: var(--ds-shadow-sm);
    --shadow-md: var(--ds-shadow-md);
    --shadow-lg: var(--ds-shadow-lg);
    --border-radius: var(--ds-radius-lg);
    --transition: var(--ds-transition-base);
}

/* Responsive spacing adjustments */
@media (max-width: 768px) {
    :root {
        --page-padding: var(--ds-space-sm);
        --section-gap: var(--ds-space-md);
        --widget-gap: var(--ds-space-sm);
    }
}

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

    --ds-color-text-primary: #e2e8f0;
    --ds-color-text-secondary: #94a3b8;

    --ds-color-surface: #111827;
    --ds-color-surface-alt: #0f172a;
    --ds-color-surface-elevated: rgba(15, 23, 42, 0.9);

    --ds-color-border: rgb(148 163 184 / 0.38);
    --ds-color-border-strong: rgb(148 163 184 / 0.55);

    --ds-color-backdrop: rgb(2 6 23 / 0.65);
    --ds-gradient-page: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

    --ds-shadow-xs: 0 1px 1px rgb(2 6 23 / 0.4);
    --ds-shadow-sm: 0 1px 2px 0 rgb(2 6 23 / 0.55);
    --ds-shadow-md: 0 4px 6px -1px rgb(2 6 23 / 0.6), 0 2px 4px -2px rgb(2 6 23 / 0.45);
    --ds-shadow-lg: 0 12px 24px -3px rgb(2 6 23 / 0.65), 0 6px 12px -6px rgb(2 6 23 / 0.6);

    --primary-color: var(--ds-color-primary-400);
    --primary-dark: var(--ds-color-primary-300);
    --secondary-color: var(--ds-color-neutral-400);
    --dark-color: var(--ds-color-text-primary);
    --light-color: #1f2937;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --ds-color-text-primary: #e2e8f0;
        --ds-color-text-secondary: #94a3b8;

        --ds-color-surface: #111827;
        --ds-color-surface-alt: #0f172a;
        --ds-color-surface-elevated: rgba(15, 23, 42, 0.9);

        --ds-color-border: rgb(148 163 184 / 0.38);
        --ds-color-border-strong: rgb(148 163 184 / 0.55);

        --ds-color-backdrop: rgb(2 6 23 / 0.65);
        --ds-gradient-page: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

        --ds-shadow-xs: 0 1px 1px rgb(2 6 23 / 0.4);
        --ds-shadow-sm: 0 1px 2px 0 rgb(2 6 23 / 0.55);
        --ds-shadow-md: 0 4px 6px -1px rgb(2 6 23 / 0.6), 0 2px 4px -2px rgb(2 6 23 / 0.45);
        --ds-shadow-lg: 0 12px 24px -3px rgb(2 6 23 / 0.65), 0 6px 12px -6px rgb(2 6 23 / 0.6);

        --primary-color: var(--ds-color-primary-400);
        --primary-dark: var(--ds-color-primary-300);
        --secondary-color: var(--ds-color-neutral-400);
        --dark-color: var(--ds-color-text-primary);
        --light-color: #1f2937;
    }
}