:root {
    /*
     * TIPOGRAFÍA
     */
    --smu-font-display: "Bricolage Grotesque", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --smu-font-body: "Archivo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --smu-font-data: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

    --smu-font-weight-regular: 400;
    --smu-font-weight-medium: 500;
    --smu-font-weight-semibold: 600;
    --smu-font-weight-bold: 700;
    --smu-font-weight-extrabold: 800;

    --smu-heading-weight: var(--smu-font-weight-extrabold);
    --smu-heading-line-height: 1.05;
    --smu-heading-letter-spacing: -0.035em;

    --smu-body-weight: var(--smu-font-weight-regular);
    --smu-body-line-height: 1.65;

    /*
     * ESCALA TIPOGRÁFICA
     */
    --smu-text-xs: 0.75rem;
    --smu-text-sm: 0.875rem;
    --smu-text-md: 1rem;
    --smu-text-lg: clamp(1.05rem, 2vw, 1.3rem);
    --smu-text-xl: clamp(1.25rem, 1.5vw, 1.625rem);

    --smu-heading-xs: clamp(1.25rem, 2vw, 1.75rem);
    --smu-heading-sm: clamp(1.75rem, 3vw, 2.75rem);
    --smu-heading-md: clamp(2.5rem, 5vw, 4.75rem);
    --smu-heading-lg: clamp(3.5rem, 7vw, 7rem);
    --smu-heading-xl: clamp(4rem, 9vw, 9rem);

    /*
     * PALETA SMARTMIND VIGENTE
     */
    --smu-color-white: #FFFFFF;

    --smu-color-ink: #14100E;
    --smu-color-ink-soft: #292421;

    --smu-color-bg: #FFFFFF;
    --smu-color-sunken: #F6F6F4;
    --smu-color-warm: #F2F2EF;
    --smu-color-border-warm: #E5E5E1;

    --smu-color-cloud: #F0EEE9;
    --smu-color-greige: #A39E93;

    --smu-color-gold: #D9A452;
    --smu-color-gold-deep: #C08F3E;

    --smu-color-burgundy: #7E2437;
    --smu-color-burgundy-deep: #3C121E;

    --smu-color-green-light: #7FD4AE;

    /*
     * VERDE SMARTMIND
     * La referencia original usa OKLCH.
     */
    --smu-color-green-50: oklch(0.97 0.018 162);
    --smu-color-green-100: oklch(0.94 0.035 162);
    --smu-color-green-500: oklch(0.52 0.140 162);
    --smu-color-green-600: oklch(0.44 0.130 162);
    --smu-color-green-700: oklch(0.36 0.110 162);

    /*
     * TOKENS SEMÁNTICOS
     */
    --smu-color-page: var(--smu-color-bg);
    --smu-color-surface: var(--smu-color-white);
    --smu-color-surface-soft: var(--smu-color-sunken);
    --smu-color-surface-warm: var(--smu-color-warm);
    --smu-color-surface-inverse: var(--smu-color-ink);

    --smu-color-text: var(--smu-color-ink);
    --smu-color-text-muted: var(--smu-color-greige);
    --smu-color-text-inverse: var(--smu-color-cloud);

    --smu-color-accent: var(--smu-color-green-500);
    --smu-color-accent-hover: var(--smu-color-green-600);
    --smu-color-accent-press: var(--smu-color-green-700);
    --smu-color-accent-soft: var(--smu-color-green-50);

    --smu-color-border: var(--smu-color-border-warm);

    /*
     * ESPACIADO
     */
    --smu-space-1: 0.25rem;
    --smu-space-2: 0.5rem;
    --smu-space-3: 0.75rem;
    --smu-space-4: 1rem;
    --smu-space-5: 1.25rem;
    --smu-space-6: 1.5rem;
    --smu-space-8: 2rem;
    --smu-space-10: 2.5rem;
    --smu-space-12: 3rem;
    --smu-space-16: 4rem;
    --smu-space-20: 5rem;
    --smu-space-24: 6rem;
    --smu-space-32: 8rem;
    --smu-space-40: 10rem;

    /*
     * LAYOUT
     *
     * 1240px es el ancho estructural usado en la Home actual.
     */
    --smu-page-gutter: 32px;
    --smu-container-narrow: 800px;
    --smu-container-content: 1120px;
    --smu-container-wide: 1240px;

    --smu-section-space-sm: clamp(3.5rem, 6vw, 6rem);
    --smu-section-space-md: clamp(5rem, 8vw, 8rem);
    --smu-section-space-lg: clamp(6rem, 10vw, 10rem);

    /*
     * RADIOS
     */
    --smu-radius-button: 10px;
    --smu-radius-card: 16px;
    --smu-radius-media: 24px;
    --smu-radius-pill: 999px;

    /*
     * BORDES / SOMBRAS
     */
    --smu-border-subtle: 1px solid var(--smu-color-border);

    --smu-shadow-card:
        0 1px 2px rgba(20, 16, 14, 0.04),
        0 12px 40px -8px rgba(20, 16, 14, 0.12);

    --smu-shadow-header:
        0 8px 30px rgba(20, 16, 14, 0.06);

    /*
     * MOVIMIENTO
     */
    --smu-duration-fast: 160ms;
    --smu-duration-normal: 260ms;
    --smu-duration-slow: 500ms;
    --smu-ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);

    /*
     * Z-INDEX
     */
    --smu-z-header: 100;
    --smu-z-dropdown: 200;
    --smu-z-modal: 500;
}

@media (max-width: 768px) {
    :root {
        --smu-page-gutter: 24px;
    }
}

@media (max-width: 480px) {
    :root {
        --smu-page-gutter: 20px;
    }
}


/* ============================================================
   SMARTMIND ORIGINAL DESIGN SYSTEM BRIDGE
   ------------------------------------------------------------
   Compatibilidad directa con las variables utilizadas por
   Smartmind Home.dc.html.

   No redefine la arquitectura Ultra: expone los nombres del
   diseño fuente sobre los tokens actuales/valores originales.
   ============================================================ */

:root {

    /* --------------------------------------------------------
       Colores base del HTML original
       -------------------------------------------------------- */

    --color-primary: #7e2437;
    --color-primary-dark: #3c121e;
    --color-primary-ink: #14100e;

    --color-accent: #d9a452;
    --color-accent-hover: #c08f3e;
    --color-accent-deep: #8c5a10;
    --color-accent-soft: #f4ead4;

    --color-surface: #ffffff;
    --color-surface-alt: #f6f6f4;
    --color-surface-warm: #f2f2ef;
    --color-surface-inverse: #3c121e;
    --color-surface-raised: #ffffff;

    --color-text: #14100e;
    --color-text-muted: #625d56;
    --color-text-subtle: #8a857d;
    --color-text-inverse: #f0eee9;

    --color-border: #e5e5e1;
    --color-border-inverse: rgba(240, 238, 233, 0.14);


    /* --------------------------------------------------------
       Alias semánticos usados literalmente por Smartmind Home
       -------------------------------------------------------- */

    --bg: var(--color-surface);
    --bg-elevated: var(--color-surface-raised);
    --bg-sunken: var(--color-surface-alt);
    --bg-warm: var(--color-surface-warm);
    --bg-inverse: var(--color-surface-inverse);

    --fg-1: var(--color-text);
    --fg-2: var(--color-text-muted);
    --fg-3: var(--color-text-subtle);
    --fg-4: #a39e93;

    --fg-on-accent: #ffffff;
    --fg-on-inverse: var(--color-text-inverse);

    --border: var(--color-border);
    --border-subtle: var(--color-border);
    --border-warm: var(--color-border);

    --accent: #00804F;
    --accent-hover: #006E44;
    --accent-rgb: 0 128 79;

    --stratoos-gold: var(--color-accent);
    --stratoos-gold-deep: var(--color-accent-deep);

    --burgundy: var(--color-primary);
    --burgundy-deep: var(--color-primary-dark);
    --burgundy-ink: var(--color-primary-ink);

    --rose: var(--color-accent);
    --rose-pale: var(--color-accent-soft);

    --cream: var(--color-surface);
    --cream-warm: var(--color-surface-warm);

    --slate: var(--color-text-muted);
    --ink: var(--color-text);
    --hairline: var(--color-border);


    /* --------------------------------------------------------
       Nombres de color usados directamente en el HTML fuente
       -------------------------------------------------------- */

    --tinta-950: #14100e;
    --tinta-700: #625d56;
    --tinta-500: #8a857d;
    --tinta-400: #a39e93;
    --tinta-300: #c8c5bf;
    --tinta-100: #e5e5e1;

    --papel-100: #f6f6f4;
    --papel-200: #f2f2ef;
    --papel-300: #e5e5e1;

    --bermellon-500: #7e2437;
    --bermellon-600: #3c121e;

    --ambar-500: #d9a452;


    /* --------------------------------------------------------
       Tipografía exacta Smartmind
       -------------------------------------------------------- */

    --font-display: "Bricolage Grotesque", system-ui, sans-serif;
    --font-body: "Archivo", system-ui, sans-serif;
    --font-sans: var(--font-body);
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;


    /* --------------------------------------------------------
       Contenedor
       -------------------------------------------------------- */

    --container-max: 1240px;


    /* --------------------------------------------------------
       Radios originales
       -------------------------------------------------------- */

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;


    /* --------------------------------------------------------
       Sombras originales
       -------------------------------------------------------- */

    --shadow-xs:
        0 1px 0 0 rgba(20, 16, 14, 0.04);

    --shadow-sm:
        0 1px 2px 0 rgba(20, 16, 14, 0.06),
        0 1px 1px 0 rgba(20, 16, 14, 0.04);

    --shadow-md:
        0 6px 16px -4px rgba(20, 16, 14, 0.10),
        0 2px 4px -2px rgba(20, 16, 14, 0.06);

    --shadow-lg:
        0 18px 40px -12px rgba(20, 16, 14, 0.18),
        0 4px 8px -4px rgba(20, 16, 14, 0.08);

    --shadow-xl:
        0 28px 64px -20px rgba(20, 16, 14, 0.26),
        0 8px 18px -8px rgba(20, 16, 14, 0.12);


    /* --------------------------------------------------------
       Variables dinámicas del componente original
       -------------------------------------------------------- */

    --det: var(--ambar-500);
    --ry: 1;
}