/* ==========================================================================
   Nublo Solutions - theme.css  |  v1.0  |  fuente unica de verdad
   Generado desde tokens/*.json. No edites los valores a mano: edita los
   tokens y vuelve a generar. Contraste verificado en claro y oscuro (WCAG AA).
   ========================================================================== */

:root {
    color-scheme: light dark;

    /* --- color: rol semantico (claro) --- */
    --color-surface-page: #F2F1ED;
    --color-surface-card: #FFFFFF;
    --color-surface-raised: #F5F6FC;
    --color-surface-inverse: #0E1116;
    --color-surface-brandSubtle: #F4F1FF;
    --color-text-primary: #1D1E25;
    --color-text-secondary: #575A66;
    --color-text-muted: #6E717F;
    --color-text-onAction: #FFFFFF;
    --color-text-onInverse: #F2F1ED;
    --color-text-link: #5A44AF;
    --color-text-brand: #5A44AF;
    --color-text-accent: #943C06;
    --color-action-primary: #5A44AF;
    --color-action-primaryHover: #453783;
    --color-action-secondary: #D9DBE4;
    --color-action-destructive: #C23C3B;
    --color-action-focusRing: #5A44AF;
    --color-border-subtle: #D9DBE4;
    --color-border-default: #C2C4CF;
    --color-border-strong: #888B98;
    --color-border-brand: #7157D8;
    --color-feedback-success: #086C43;
    --color-feedback-warning: #804F00;
    --color-feedback-error: #C23C3B;
    --color-feedback-info: #005F98;
    --color-brand-monolithFront: #453783;
    --color-brand-monolithFacet: #7157D8;
    --color-brand-horizon: #DA6526;

    /* --- tipografia --- */
    --font-display: "Archivo", "Archivo Expanded", "Helvetica Neue", Arial, sans-serif;
    --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", Consolas, monospace;
    --width-display: 112;   /* eje wdth de Archivo para titulares */
    --tracking-display: -0.02em;
    --tracking-label: 0.08em;
    --tracking-system: 0.24em;

    /* --- escala tipografica: tercera mayor (1.25) --- */
    --text-2xs: 0.64rem;
    --text-xs: 0.8rem;
    --text-sm: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.563rem;
    --text-2xl: 1.953rem;
    --text-3xl: 2.441rem;
    --text-4xl: 3.052rem;
    --text-5xl: 3.815rem;

    /* --- espaciado (4px) --- */
    --space-0: 0rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-10: 8rem;

    /* --- radios --- */
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 14px;
    --radius-pill: 999px;

    /* --- elevacion --- */
    --elevation-flat: none;
    --elevation-raised: 0 1px 2px rgba(14,17,22,.06), 0 2px 8px rgba(14,17,22,.05);
    --elevation-float: 0 8px 28px rgba(14,17,22,.10), 0 2px 6px rgba(14,17,22,.06);

    /* --- movimiento --- */
    --duration-instant: 80ms;
    --duration-fast: 140ms;
    --duration-base: 220ms;
    --duration-slow: 420ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-inOut: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-stone: cubic-bezier(0.2, 0, 0, 1);
}

/* Oscuro por preferencia del sistema, salvo que el usuario haya elegido claro */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-surface-page: #0E1116;
    --color-surface-card: #2E3039;
    --color-surface-raised: #434650;
    --color-surface-inverse: #F2F1ED;
    --color-surface-brandSubtle: #1E193A;
    --color-text-primary: #F5F6FC;
    --color-text-secondary: #A6A9B4;
    --color-text-muted: #888B98;
    --color-text-onAction: #FFFFFF;
    --color-text-onInverse: #1D1E25;
    --color-text-link: #C1ADFF;
    --color-text-brand: #A68EFF;
    --color-text-accent: #FFA26C;
    --color-action-primary: #8A6FFE;
    --color-action-primaryHover: #A68EFF;
    --color-action-secondary: #434650;
    --color-action-destructive: #FF726C;
    --color-action-focusRing: #C1ADFF;
    --color-border-subtle: #434650;
    --color-border-default: #575A66;
    --color-border-strong: #888B98;
    --color-border-brand: #A68EFF;
    --color-feedback-success: #77DDA5;
    --color-feedback-warning: #F8B848;
    --color-feedback-error: #FF726C;
    --color-feedback-info: #70CDFF;
    --color-brand-monolithFront: #5A44AF;
    --color-brand-monolithFacet: #A68EFF;
    --color-brand-horizon: #FB8348;
  }
}

/* Oscuro por eleccion explicita */
:root[data-theme="dark"] {
    --color-surface-page: #0E1116;
    --color-surface-card: #2E3039;
    --color-surface-raised: #434650;
    --color-surface-inverse: #F2F1ED;
    --color-surface-brandSubtle: #1E193A;
    --color-text-primary: #F5F6FC;
    --color-text-secondary: #A6A9B4;
    --color-text-muted: #888B98;
    --color-text-onAction: #FFFFFF;
    --color-text-onInverse: #1D1E25;
    --color-text-link: #C1ADFF;
    --color-text-brand: #A68EFF;
    --color-text-accent: #FFA26C;
    --color-action-primary: #8A6FFE;
    --color-action-primaryHover: #A68EFF;
    --color-action-secondary: #434650;
    --color-action-destructive: #FF726C;
    --color-action-focusRing: #C1ADFF;
    --color-border-subtle: #434650;
    --color-border-default: #575A66;
    --color-border-strong: #888B98;
    --color-border-brand: #A68EFF;
    --color-feedback-success: #77DDA5;
    --color-feedback-warning: #F8B848;
    --color-feedback-error: #FF726C;
    --color-feedback-info: #70CDFF;
    --color-brand-monolithFront: #5A44AF;
    --color-brand-monolithFacet: #A68EFF;
    --color-brand-horizon: #FB8348;
}

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