/*
 * Kitarita — design tokens for MiroTalk P2P
 * Aligned with kitarita-app cabinet + landing palette.
 */

:root {
    /* Colors — brand green instead of MiroTalk blue */
    --ds-brand-50: #eef6f2;
    --ds-brand-100: #d8ebe1;
    --ds-brand-300: #7eb5a4;
    --ds-brand-500: #3d8b7a;
    --ds-brand-600: #0f6b4c;
    --ds-brand-700: #2f6b5f;

    --ds-neutral-0: #ffffff;
    --ds-neutral-50: #f8f5f0;
    --ds-neutral-100: #e4ece7;
    --ds-neutral-300: #c9d5ce;
    --ds-neutral-500: #5a6b63;
    --ds-neutral-700: #2a2a2a;
    --ds-neutral-800: #1a2420;
    --ds-neutral-900: #121816;

    --ds-success: #1f6b3a;
    --ds-warning: #c47a6a;
    --ds-danger: #9b2c2c;
    --ds-info: #3d8b7a;

    /* Spacing (4px base) */
    --ds-space-1: 4px;
    --ds-space-2: 8px;
    --ds-space-3: 12px;
    --ds-space-4: 16px;
    --ds-space-5: 20px;
    --ds-space-6: 24px;
    --ds-space-7: 32px;
    --ds-space-8: 40px;
    --ds-space-9: 48px;
    --ds-space-10: 64px;

    /* Border radius */
    --ds-radius-xs: 4px;
    --ds-radius-sm: 6px;
    --ds-radius-md: 10px;
    --ds-radius-lg: 14px;
    --ds-radius-xl: 20px;
    --ds-radius-full: 999px;

    /* Shadows */
    --ds-shadow-sm: 0 1px 2px rgba(26, 36, 32, 0.08);
    --ds-shadow-md: 0 6px 18px rgba(26, 36, 32, 0.1);
    --ds-shadow-lg: 0 20px 48px rgba(26, 36, 32, 0.12);
    --ds-shadow-focus: 0 0 0 2px var(--ds-brand-500), 0 0 0 4px rgba(15, 107, 76, 0.22);

    /* Stacking order */
    --ds-z-base: 1;
    --ds-z-grid: 5;
    --ds-z-toolbar: 20;
    --ds-z-popover: 40;
    --ds-z-panel: 60;
    --ds-z-overlay: 80;
    --ds-z-modal: 100;
    --ds-z-toast: 200;
    --ds-z-tooltip: 300;

    /* Motion */
    --ds-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ds-ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
    --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ds-duration-fast: 120ms;
    --ds-duration-base: 180ms;
    --ds-duration-slow: 240ms;

    --ds-touch-min: 44px;

    /* Typography — close to cabinet (Manrope/Montserrat Alternates fallback) */
    --ds-font-sans: 'Manrope', 'Montserrat Alternates', 'Montserrat', system-ui, -apple-system, 'Segoe UI',
        sans-serif;
    --ds-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

:where(button, [role='button'], a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ds-brand-500);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(15, 107, 76, 0.22);
    border-radius: var(--ds-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .swal2-container .swal2-popup,
    .swal2-icon,
    .swal2-icon * {
        animation: none !important;
        transition: none !important;
    }
}