@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --color-bg-app-start: #667eea;
    --color-bg-app-end: #764ba2;
    --color-bg-app-mesh-optional: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.24), transparent 40%);

    --color-surface-primary: rgba(255, 255, 255, 0.94);
    --color-surface-secondary: #ffffff;
    --color-surface-tertiary: #f8fafc;
    --color-surface-elevated: #ffffff;
    --color-surface-overlay: rgba(15, 23, 42, 0.52);

    --color-border-soft: rgba(255, 255, 255, 0.42);
    --color-border-default: #e2e8f0;
    --color-border-strong: #cbd5e1;

    --color-text-primary: #0f172a;
    --color-text-secondary: #334155;
    --color-text-muted: #64748b;
    --color-text-inverse: #f8fafc;

    --color-accent: #4f46e5;
    --color-accent-hover: #4338ca;
    --color-accent-soft: #e0e7ff;
    --color-success: #059669;
    --color-success-soft: #d1fae5;
    --color-warning: #d97706;
    --color-warning-soft: #fef3c7;
    --color-danger: #dc2626;
    --color-danger-soft: #fee2e2;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.1);
    --shadow-lg: 0 18px 44px rgba(15, 23, 42, 0.16);
    --shadow-xl: 0 24px 60px rgba(15, 23, 42, 0.22);

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;

    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;

    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 28px;
    --font-size-3xl: 34px;

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

    --line-height-tight: 1.25;
    --line-height-normal: 1.45;
    --line-height-relaxed: 1.65;

    --transition-fast: 0.16s ease;
    --transition-base: 0.24s ease;
    --transition-slow: 0.34s ease;

    --z-dropdown: 1000;
    --z-sticky: 1010;
    --z-overlay: 10040;
    --z-drawer: 10052;
}

/* Keep content surfaces light across system themes. */