/*
 * Matmut Horizons design tokens.
 * Role: central source for colors, spacing, radii, shadows and layout widths.
 * Naming: --color-* for palette and semantics, --space-* for rhythm, --radius-* for shape.
 * Generic .hz-* components consume these tokens; business components such as .cloud-* and .hz-app-* keep their domain selectors.
 */

:root {
    --color-primary: #0f2a3d;
    --color-primary-dark: #071824;
    --color-primary-soft: #eaf4f8;
    --color-primary-rgb: 15, 42, 61;

    --color-secondary: #0ea5a4;
    --color-secondary-dark: #0f766e;
    --color-secondary-soft: #ecfeff;
    --color-secondary-rgb: 14, 165, 164;

    --color-success: #22c55e;
    --color-success-dark: #15803d;
    --color-success-soft: #f0fdf4;
    --color-success-rgb: 34, 197, 94;

    --color-warning: #f59e0b;
    --color-warning-dark: #92400e;
    --color-warning-soft: #fffbeb;
    --color-warning-rgb: 245, 158, 11;

    --color-danger: #dc2626;
    --color-danger-dark: #991b1b;
    --color-danger-soft: #fef2f2;
    --color-danger-rgb: 220, 38, 38;

    --color-neutral: #4b5563;
    --color-neutral-dark: #374151;
    --color-neutral-soft: #f9fafb;
    --color-neutral-rgb: 75, 85, 99;

    --color-accent-rose: #dc2626;
    --color-accent-rose-rgb: 220, 38, 38;
    --color-accent-violet: #4f46e5;
    --color-accent-violet-rgb: 79, 70, 229;
    --color-accent-yellow: #f59e0b;
    --color-accent-yellow-rgb: 245, 158, 11;

    --color-text: #102033;
    --color-text-muted: var(--color-neutral);
    --color-text-subtle: #64748b;
    --color-text-inverse: #ffffff;

    --color-border: #d6e5ec;
    --color-border-subtle: rgba(var(--color-primary-rgb), 0.08);
    --color-border-medium: rgba(var(--color-primary-rgb), 0.12);

    --color-surface: #ffffff;
    --color-surface-alt: #f9fafb;
    --color-surface-soft: #ecfeff;
    --color-surface-rgb: 255, 255, 255;

    --shadow-soft: 0 18px 40px rgba(var(--color-primary-rgb), 0.08);
    --shadow-card: 0 16px 32px rgba(var(--color-primary-rgb), 0.08);
    --shadow-elevated: 0 24px 54px rgba(var(--color-primary-rgb), 0.16);

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    --container: 1200px;
    --container-wide: 1400px;

    --space-1: 0.5rem;
    --space-2: 0.75rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4rem;
    --space-8: 5rem;

    --transition: 180ms ease;
}