/**
 * Design tokens — Hemikra
 *
 * Los colores de marca principales proceden del sistema oficial
 * "Violeta Clínico Suave" definido para Hemikra.
 */

:root {
    /* --------------------------------------------------------------
     * Colores oficiales de marca
     * -------------------------------------------------------------- */
    --hemik-color-background: #F1EEF6;
    --hemik-color-text: #1E1B4B;
    --hemik-color-brand: #6D28D9;
    --hemik-color-action: #8B5CF6;
    --hemik-color-action-hover: #5B21B6;
    --hemik-color-border: #E9D5FF;
    --hemik-color-surface: #FCFBFD;

    /* --------------------------------------------------------------
     * Colores derivados de apoyo
     * -------------------------------------------------------------- */
    --hemik-color-brand-soft: #EDE9FE;
    --hemik-color-brand-subtle: #F0ECF8;
    --hemik-color-brand-mist: #F5F2F8;
    --hemik-color-brand-deep: #2E1A47;
    --hemik-color-text-soft: #514C73;
    --hemik-color-text-muted: #716B8D;
    --hemik-color-text-faint: #94A3B8;
    --hemik-color-border-strong: #D8B4FE;
    --hemik-color-border-soft: #E7E0EE;
    --hemik-color-surface-soft: #F6F3F8;
    --hemik-color-surface-muted: #F2EEF5;
    --hemik-color-surface-elevated: #FEFCFF;
    --hemik-color-canvas: #ECE7F1;
    --hemik-color-header: rgb(247 244 249 / 0.94);
    --hemik-color-focus: #7C3AED;
    --hemik-color-overlay: rgb(30 27 75 / 0.48);
    --hemik-color-deep: #24153D;

    /* Estados semánticos discretos */
    --hemik-color-success: #3F7660;
    --hemik-color-success-soft: #EEF7F2;
    --hemik-color-warning: #8A642B;
    --hemik-color-warning-soft: #FBF6EA;
    --hemik-color-danger: #9A4E5B;
    --hemik-color-danger-soft: #FBF0F2;

    /* --------------------------------------------------------------
     * Tipografía
     * -------------------------------------------------------------- */
    --hemik-font-sans:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --hemik-font-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    --hemik-font-size-xs: 0.8125rem;
    --hemik-font-size-sm: 0.9375rem;
    --hemik-font-size-base: 1rem;
    --hemik-font-size-md: 1.0625rem;
    --hemik-font-size-lg: 1.1875rem;
    --hemik-font-size-xl: 1.375rem;
    --hemik-font-size-2xl: 1.75rem;
    --hemik-font-size-3xl: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
    --hemik-font-size-4xl: clamp(2.4rem, 1.8rem + 2vw, 3.5rem);

    --hemik-line-height-tight: 1.2;
    --hemik-line-height-heading: 1.3;
    --hemik-line-height-body: 1.7;
    --hemik-line-height-relaxed: 1.85;

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

    /* --------------------------------------------------------------
     * Escala de espaciado — base 4px
     * -------------------------------------------------------------- */
    --hemik-space-0: 0;
    --hemik-space-1: 0.25rem;
    --hemik-space-2: 0.5rem;
    --hemik-space-3: 0.75rem;
    --hemik-space-4: 1rem;
    --hemik-space-5: 1.25rem;
    --hemik-space-6: 1.5rem;
    --hemik-space-8: 2rem;
    --hemik-space-10: 2.5rem;
    --hemik-space-12: 3rem;
    --hemik-space-16: 4rem;
    --hemik-space-20: 5rem;
    --hemik-space-24: 6rem;

    /* --------------------------------------------------------------
     * Radios
     * -------------------------------------------------------------- */
    --hemik-radius-sm: 0.375rem;
    --hemik-radius-md: 0.75rem;
    --hemik-radius-lg: 1rem;
    --hemik-radius-xl: 1.5rem;
    --hemik-radius-pill: 999px;

    /* --------------------------------------------------------------
     * Bordes
     * -------------------------------------------------------------- */
    --hemik-border-width: 1px;
    --hemik-border: var(--hemik-border-width) solid var(--hemik-color-border);
    --hemik-border-strong: var(--hemik-border-width) solid var(--hemik-color-border-strong);

    /* --------------------------------------------------------------
     * Sombras suaves
     * -------------------------------------------------------------- */
    --hemik-shadow-xs: 0 1px 2px rgb(30 27 75 / 0.025);
    --hemik-shadow-sm: 0 8px 24px rgb(30 27 75 / 0.055);
    --hemik-shadow-md: 0 18px 48px rgb(30 27 75 / 0.075);
    --hemik-shadow-header: 0 10px 32px rgb(30 27 75 / 0.055);
    --hemik-shadow-focus: 0 0 0 3px rgb(139 92 246 / 0.24);

    /* --------------------------------------------------------------
     * Contenedores
     * -------------------------------------------------------------- */
    --hemik-container-reading: 46rem;
    --hemik-container-content: 72rem;
    --hemik-container-wide: 87.5rem;
    --hemik-container-gutter: clamp(1rem, 3vw, 2rem);

    /* --------------------------------------------------------------
     * Grid
     * -------------------------------------------------------------- */
    --hemik-grid-gap-sm: var(--hemik-space-4);
    --hemik-grid-gap: var(--hemik-space-6);
    --hemik-grid-gap-lg: var(--hemik-space-8);

    /* --------------------------------------------------------------
     * Movimiento
     * -------------------------------------------------------------- */
    --hemik-duration-fast: 140ms;
    --hemik-duration-normal: 220ms;
    --hemik-ease-standard: cubic-bezier(0.2, 0, 0, 1);

    /* --------------------------------------------------------------
     * Capas
     * -------------------------------------------------------------- */
    --hemik-z-base: 1;
    --hemik-z-header: 100;
    --hemik-z-overlay: 500;
    --hemik-z-modal: 1000;
    --hemik-z-skip-link: 10000;

    /* --------------------------------------------------------------
     * Breakpoints documentados
     *
     * CSS Custom Properties no pueden utilizarse directamente dentro
     * de @media de forma interoperable. Los valores se replican en
     * responsive.css y quedan centralizados aquí como documentación.
     * -------------------------------------------------------------- */
    --hemik-breakpoint-sm: 36rem;    /* 576px */
    --hemik-breakpoint-md: 48rem;    /* 768px */
    --hemik-breakpoint-lg: 64rem;    /* 1024px */
    --hemik-breakpoint-xl: 80rem;    /* 1280px */
    --hemik-breakpoint-2xl: 90rem;   /* 1440px */
}