/*
 * Sosecorp Design System — Opción A: Precisión industrial
 * Fuente única de decisiones visuales. Los componentes deben consumir
 * variables --sc-* y no introducir nuevos colores o medidas sin documentarlos.
 */
:root {
    /* Marca y superficies */
    --sc-color-brand-50: #fff1f2;
    --sc-color-brand-100: #ffe0e3;
    --sc-color-brand-200: #ffc5cb;
    --sc-color-brand-500: #d72638;
    --sc-color-brand-600: #bd1f30;
    --sc-color-brand-700: #a11727;
    --sc-color-brand-900: #65101b;

    --sc-color-ink-950: #10171c;
    --sc-color-ink-900: #172027;
    --sc-color-ink-800: #243039;
    --sc-color-ink-700: #394750;
    --sc-color-ink-600: #52616a;
    --sc-color-ink-500: #68747c;
    --sc-color-ink-400: #8c979e;
    --sc-color-ink-300: #b5bec3;
    --sc-color-ink-200: #dce2e5;
    --sc-color-ink-100: #edf0f2;
    --sc-color-ink-50: #f3f5f6;
    --sc-color-white: #ffffff;

    /* Estados semánticos */
    --sc-color-success: #217a55;
    --sc-color-success-soft: #e8f5ee;
    --sc-color-warning: #f0a202;
    --sc-color-warning-ink: #805600;
    --sc-color-warning-soft: #fff4d8;
    --sc-color-danger: #bd2637;
    --sc-color-danger-soft: #fbeaec;
    --sc-color-info: #287fa1;
    --sc-color-info-soft: #eaf5fa;

    /* Roles de interfaz */
    --sc-color-page: var(--sc-color-ink-50);
    --sc-color-surface: var(--sc-color-white);
    --sc-color-surface-subtle: var(--sc-color-ink-50);
    --sc-color-text: var(--sc-color-ink-900);
    --sc-color-text-muted: var(--sc-color-ink-500);
    --sc-color-border: var(--sc-color-ink-200);
    --sc-color-focus: var(--sc-color-brand-500);

    /* Tipografía */
    --sc-font-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --sc-font-body: 'IBM Plex Sans', system-ui, sans-serif;
    --sc-font-weight-regular: 400;
    --sc-font-weight-medium: 500;
    --sc-font-weight-semibold: 600;
    --sc-font-weight-bold: 700;
    --sc-font-size-2xs: 0.6875rem;
    --sc-font-size-xs: 0.75rem;
    --sc-font-size-sm: 0.875rem;
    --sc-font-size-md: 1rem;
    --sc-font-size-lg: 1.25rem;
    --sc-font-size-xl: 1.5rem;
    --sc-font-size-2xl: 2rem;
    --sc-line-height-tight: 1.15;
    --sc-line-height-body: 1.55;

    /* Escala base de 4 px */
    --sc-space-0: 0;
    --sc-space-1: 0.25rem;
    --sc-space-2: 0.5rem;
    --sc-space-3: 0.75rem;
    --sc-space-4: 1rem;
    --sc-space-5: 1.25rem;
    --sc-space-6: 1.5rem;
    --sc-space-8: 2rem;
    --sc-space-10: 2.5rem;
    --sc-space-12: 3rem;

    /* Forma */
    --sc-radius-xs: 4px;
    --sc-radius-control: 8px;
    --sc-radius-card: 12px;
    --sc-radius-modal: 16px;
    --sc-radius-pill: 999px;
    --sc-border-width: 1px;
    --sc-control-height-sm: 32px;
    --sc-control-height-md: 40px;
    --sc-control-height-lg: 48px;

    /* Elevación */
    --sc-shadow-xs: 0 1px 2px rgb(16 23 28 / 6%);
    --sc-shadow-sm: 0 4px 12px rgb(16 23 28 / 7%);
    --sc-shadow-md: 0 10px 28px rgb(16 23 28 / 10%);
    --sc-shadow-lg: 0 24px 64px rgb(16 23 28 / 18%);
    --sc-focus-ring: 0 0 0 3px rgb(215 38 56 / 22%);

    /* Movimiento */
    --sc-duration-fast: 120ms;
    --sc-duration-normal: 200ms;
    --sc-duration-slow: 320ms;
    --sc-ease-standard: cubic-bezier(.2, 0, 0, 1);

    /* Capas */
    --sc-z-dropdown: 1000;
    --sc-z-sticky: 1020;
    --sc-z-modal: 1055;
    --sc-z-toast: 1090;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --sc-duration-fast: 0ms;
        --sc-duration-normal: 0ms;
        --sc-duration-slow: 0ms;
    }
}