/* TGPLibrary CSS Variables
   Centralized design tokens shared across all apps.
   App-specific colors (--admin-primary, etc.) remain in their respective files. */

:root {
    /* Layout */
    --header-height: calc(1.5rem + 41px);

    /* Text Colors */
    --text-primary: #333;
    --text-secondary: #666;
    --text-muted: #999;

    /* Backgrounds */
    --bg-white: #fff;
    --bg-light: #f8f9fa;
    --bg-subtle: #fafafa;
    --bg-muted: #f5f5f5;
    --bg-code: #f0f0f0;

    /* Borders */
    --border-light: #e0e0e0;
    --border-medium: #ddd;
    --border-subtle: #eee;

    /* Status Colors */
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-info: #17a2b8;

    /* Status Alert Backgrounds */
    --alert-success-bg: #d4edda;
    --alert-success-text: #155724;
    --alert-success-border: #c3e6cb;
    --alert-danger-bg: #f8d7da;
    --alert-danger-text: #721c24;
    --alert-danger-border: #f5c6cb;
    --alert-warning-bg: #fff3cd;
    --alert-warning-text: #856404;
    --alert-warning-border: #ffeeba;
    --alert-info-bg: #d1ecf1;
    --alert-info-text: #0c5460;
    --alert-info-border: #bee5eb;

    /* Dialogs */
    --dialog-width: min(800px, calc(100vw - 2rem));

    /* App Identity — each app overrides these with its palette */
    --app-primary: #667eea;
    --app-primary-dark: #5a6fd6;
    --app-primary-light: #f0f4ff;
    --app-focus-ring: rgba(102, 126, 234, 0.25);

    /* Shadows & Overlays */
    --shadow-subtle: rgba(0, 0, 0, 0.05);
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.12);
    --overlay-dark: rgba(0, 0, 0, 0.4);

    /* Spacing — 4px base grid (WorkerAppsAesthetic §5) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Font sizes (WorkerAppsAesthetic §4) */
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.25rem;

    /* Radii (WorkerAppsAesthetic §5) */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;

    /* Elevation (WorkerAppsAesthetic §3) */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 10px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10);
}