/* =========================================================================
   Onaris Design System — Tokens
   Extraídos de la guía Look & Feel de Inase (Adobe XD)
   Para librería: onaris-ui (React + TypeScript)
   ========================================================================= */

:root {
  /* =====================================================================
     MARCA — Brand Guidelines Onaris (sept. 2024)
     Coral y Navy = marca (coinciden con accent y leading).
     Resto = colores de apoyo: comunicación, ilustración, webs, gráficos.
     ===================================================================== */
  --brand-coral:  #FF6360;
  --brand-navy:   #172836;
  --brand-orange: #FF925C;
  --brand-purple: #BCADFF;
  --brand-blue:   #47B3C3;
  --brand-green:  #B5F9DF;
  --brand-pink:   #F9D1F1;

  /* Degradados de marca — nunca sobre logotipo ni controles de UI */
  --brand-gradient-purple: linear-gradient(200deg, #A8A3FA 0%, #BCADFF 35%, #F9D1F1 100%);
  --brand-gradient-blue:   linear-gradient(200deg, #2A9DB8 0%, #47B3C3 35%, #B5F9DF 100%);
  --brand-gradient-coral:  linear-gradient(200deg, #FF5861 0%, #FF6360 35%, #FF925C 100%);
  --brand-gradient-purple-night: linear-gradient(200deg, #BCADFF 0%, #6C66A8 45%, #172836 100%);
  --brand-gradient-blue-night:   linear-gradient(200deg, #47B3C3 0%, #2C6E7D 45%, #172836 100%);
  --brand-gradient-coral-night:  linear-gradient(200deg, #FF925C 0%, #B4484E 45%, #172836 100%);

  /* ---------------------------------------------------------------------
     COLOR — Paleta base (nombres alineados con XAML original)
     --------------------------------------------------------------------- */

  /* =====================================================================
     PALETA CANÓNICA — nombres reales del sistema Onaris (XD / XAML)
     Convención de derivadas:
       ·  .N  = el color base a N0 % de OPACIDAD sobre su fondo
                (ej. ColorLeading.7 = leading al 70%). Equivale al
                rgba() del XAML original.
       ·  los Border* son SÓLIDOS = color base OSCURECIDO un 10%.
     ===================================================================== */

  /* Accent / Marca */
  --color-accent:                              #FF6360;  /* ColorAccent */

  /* Background (fondo de app) */
  --color-background:                          #F2F1F1;  /* ColorBackground */
  --color-background-7:                        rgba(242, 241, 241, 0.70); /* ColorBackground.7 */

  /* Leading (color estructural oscuro: texto, iconos, sombras) */
  --color-leading:                             #172836;  /* ColorLeading */
  --color-leading-7:                           rgba(23, 40, 54, 0.70);    /* ColorLeading.7 */
  --color-leading-3:                           rgba(23, 40, 54, 0.30);    /* ColorLeading.3 */

  /* Text */
  --color-text:                                #172836;  /* ColorText */

  /* Sobre Leading (elementos colocados encima de superficies leading) */
  --color-element-over-leading:                #FFFFFF;  /* ColorElementOverLeading */

  /* Texto / iconos sobre Drawer */
  --color-text-icons-over-drawer:              #172836;  /* ColorTextIconsOverDrawer */
  --color-text-icons-over-drawer-3:            rgba(23, 40, 54, 0.30);    /* ColorTextIconsOverDrawer.3 */

  /* Fields (campos sobre fondo de app) */
  --color-background-fields:                   #FFFFFF;  /* ColorBackgroundFields */
  --color-background-fields-3:                 rgba(255, 255, 255, 0.30); /* ColorBackgroundFields.3 */
  --color-element-over-fields:                 #172836;  /* ColorElementOverFields */

  /* Drawer (panel lateral) y sus campos internos */
  --color-background-drawer:                   #FFFFFF;  /* ColorBackgroundDrawer */
  --color-title-over-drawer:                   #FF6360;  /* ColorTitleOverDrawer */
  --color-background-fields-over-drawer:        #F2F1F1;  /* ColorBackgroundFieldsOverDrawer */
  --color-background-fields-over-drawer-3:      rgba(242, 241, 241, 0.30); /* ColorBackgroundFieldsOverDrawer.3 */
  --color-element-over-fields-drawer:          #172836;  /* ColorElementOverFieldsDrawer */

  /* Borders — sólidos = base oscurecido 10% */
  --border-product-card:                       #E6E6E6;  /* ColorBackgroundDrawer dark 10% */
  --border-fields:                             #E6E6E6;  /* ColorBackgroundFields dark 10% */
  --border-fields-over-drawer:                 #DAD9D9;  /* ColorBackgroundFieldsOverDrawer dark 10% */

  /* Campos de formulario: fondo tintado + borde un poco más oscuro que el fondo */
  --field-bg:                                  #F2F1F1;  /* fondo de inputs/select/textarea */
  --field-border:                              #DAD9D9;  /* borde = fondo oscurecido ~8% */
  --field-border-hover:                        #C4C3C3;  /* borde en hover, algo más marcado */

  /* ---------------------------------------------------------------------
     ALIAS — nombres genéricos usados en la documentación de componentes.
     Mapean a la paleta canónica de arriba; no inventan colores nuevos.
     --------------------------------------------------------------------- */
  --color-accent-hover:        #E8524F;  /* accent oscurecido (hover) */
  --color-accent-active:       #D43F3C;  /* accent oscurecido (pressed) */
  --color-accent-soft:         #FFF0EF;  /* accent 10% sobre blanco */
  --color-accent-soft-strong:  #FFDFDE;  /* accent 20% sobre blanco */

  --color-leading-90:     rgba(23, 40, 54, 0.90);
  --color-leading-70:     var(--color-leading-7);
  --color-leading-50:     rgba(23, 40, 54, 0.50);
  --color-leading-30:     var(--color-leading-3);
  --color-leading-20:     rgba(23, 40, 54, 0.20);
  --color-leading-10:     rgba(23, 40, 54, 0.08);
  --color-leading-5:      rgba(23, 40, 54, 0.04);

  --color-text-secondary:     var(--color-leading-7);   /* 70% */
  --color-text-tertiary:      rgba(23, 40, 54, 0.50);
  --color-text-disabled:      var(--color-leading-3);   /* 30% */
  --color-text-on-accent:     #FFFFFF;
  --color-text-on-leading:    var(--color-element-over-leading);

  --color-surface:            var(--color-background-fields);          /* #FFFFFF */
  --color-surface-subtle:     #F7F6F6;
  --color-surface-sunken:     var(--color-background-fields-over-drawer); /* #F2F1F1 */
  --color-surface-drawer:     var(--color-background-drawer);          /* #FFFFFF */

  --color-border:             var(--border-fields);        /* #E6E6E6 */
  --color-border-strong:      #D4D4D4;
  --color-border-subtle:      #EFEEEE;
  --color-border-focus:       #FF6360;

  /* --- Colores semánticos — solo PRINCIPAL + TEXT --- */
  --color-success:  #14A35A;
  --color-success-text: #0D6B3C;

  --color-warning:  #F5A524;
  --color-warning-text: #8A5A08;

  --color-danger:   #E8524F;
  --color-danger-text:  #A83330;

  --color-info:     #3B82F6;
  --color-info-text:    #1E429F;

  /* Derivados automáticos para componentes (fondo soft, borde, hover).
     NO son tokens del sistema: se calculan del principal con color-mix. */
  --color-success-soft:   color-mix(in srgb, var(--color-success) 12%, #fff);
  --color-success-border: color-mix(in srgb, var(--color-success) 30%, #fff);
  --color-success-hover:  color-mix(in srgb, var(--color-success), #000 12%);
  --color-warning-soft:   color-mix(in srgb, var(--color-warning) 14%, #fff);
  --color-warning-border: color-mix(in srgb, var(--color-warning) 32%, #fff);
  --color-warning-hover:  color-mix(in srgb, var(--color-warning), #000 12%);
  --color-danger-soft:    color-mix(in srgb, var(--color-danger) 12%, #fff);
  --color-danger-border:  color-mix(in srgb, var(--color-danger) 30%, #fff);
  --color-danger-hover:   color-mix(in srgb, var(--color-danger), #000 12%);
  --color-info-soft:      color-mix(in srgb, var(--color-info) 10%, #fff);
  --color-info-border:    color-mix(in srgb, var(--color-info) 28%, #fff);
  --color-info-hover:     color-mix(in srgb, var(--color-info), #000 12%);

  /* Neutral (para badges informativos) */
  --color-neutral-soft:       #F2F1F1;
  --color-neutral-border:     #E5E5E5;
  --color-neutral-text:       rgba(23, 40, 54, 0.70);

  /* ---------------------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------------------- */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Pesos */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ---- Roles tipográficos (8) ---- cada uno = size / line-height / weight ----
     Title       título de página o sección principal
     Subtitle    subtítulo / encabezado secundario
     Body        texto plano por defecto (UI y lectura)
     Body-strong texto destacado (mismo tamaño que body, peso semibold)
     Body-sm     texto secundario más pequeño
     Caption     leyendas, timestamps, pies
     Eyebrow     etiqueta superior en mayúsculas
     Mono        datos técnicos (SKU, IDs, contadores) */

  --text-title-size:        24px;
  --text-title-weight:      700;
  --text-title-lh:          1.2;
  --text-title-ls:          -0.02em;

  --text-subtitle-size:     18px;
  --text-subtitle-weight:   600;
  --text-subtitle-lh:       1.3;
  --text-subtitle-ls:       -0.01em;

  --text-body-size:         14px;
  --text-body-weight:       400;
  --text-body-lh:           1.5;

  --text-body-strong-size:  14px;
  --text-body-strong-weight: 600;
  --text-body-strong-lh:    1.5;

  --text-body-sm-size:      12px;
  --text-body-sm-weight:    400;
  --text-body-sm-lh:        1.5;

  --text-caption-size:      11px;
  --text-caption-weight:    400;
  --text-caption-lh:        1.4;

  --text-eyebrow-size:      11px;
  --text-eyebrow-weight:    700;
  --text-eyebrow-lh:        1.4;
  --text-eyebrow-ls:        0.08em;

  --text-mono-size:         12px;
  --text-mono-weight:       500;
  --text-mono-lh:           1.45;

  /* Alias de tamaño retro-compatibles (usados por la doc y componentes) */
  --fs-2xs:  10px;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-base: 13px;
  --fs-md:   14px;
  --fs-lg:   16px;
  --fs-xl:   18px;
  --fs-2xl:  20px;
  --fs-3xl:  24px;
  --fs-4xl:  32px;
  --fs-5xl:  40px;
  --fs-6xl:  56px;

  /* Line heights */
  --lh-tight:  1.15;  /* displays, headings */
  --lh-snug:   1.25;  /* títulos de sección */
  --lh-normal: 1.45;  /* UI body */
  --lh-relaxed: 1.6;  /* lectura larga */

  /* Letter spacing */
  --ls-tight:    -0.02em;  /* displays */
  --ls-snug:     -0.01em;  /* headings */
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-wider:     0.08em;  /* eyebrows, uppercase labels */

  /* ---------------------------------------------------------------------
     SPACING — escala 4px-based
     --------------------------------------------------------------------- */
  --space-0:   0;
  --space-1:   2px;
  --space-2:   4px;
  --space-3:   6px;
  --space-4:   8px;
  --space-5:   10px;
  --space-6:   12px;
  --space-7:   14px;
  --space-8:   16px;
  --space-10:  20px;
  --space-12:  24px;
  --space-14:  28px;
  --space-16:  32px;
  --space-20:  40px;
  --space-24:  48px;
  --space-32:  64px;
  --space-40:  80px;
  --space-48:  96px;

  /* ---------------------------------------------------------------------
     RADIUS
     --------------------------------------------------------------------- */
  /* Dirección Soft & Airy: esquinas redondeadas. Las pills siguen siendo
     completamente redondeadas. */
  --radius-none: 0;
  --radius-xs:   2px;  /* tags, badges, chevrons pequeños */
  --radius-sm:   4px;  /* controles secundarios, celdas internas */
  --radius-md:   6px;  /* botones, inputs, selects (default) */
  --radius-lg:   6px;  /* cards */
  --radius-xl:   8px;  /* modals, drawers, popovers */
  --radius-2xl:  8px;  /* contenedores grandes */
  --radius-pill: 9999px;

  /* ---------------------------------------------------------------------
     SHADOWS — todas con tinte leading (no negro puro)
     --------------------------------------------------------------------- */
  /* Sombra única — para elementos que se superponen (desplegables, drawers,
     modales, popovers, sliders). Onaris usa un solo nivel de elevación. */
  --shadow-md: 0 4px 16px rgba(23, 40, 54, 0.12), 0 2px 6px rgba(23, 40, 54, 0.06);
  --shadow: var(--shadow-md);

  /* Alias retro-compatibles — todos apuntan a la sombra única */
  --shadow-xs: var(--shadow-md);
  --shadow-sm: var(--shadow-md);
  --shadow-lg: var(--shadow-md);
  --shadow-xl: var(--shadow-md);

  /* Focus ring — solo para botones y controles de selección (teclado, a11y).
     Los campos de texto NO usan ring: marcan el foco con borde accent. */
  --shadow-focus:        0 0 0 3px rgba(255, 99, 96, 0.22);
  --shadow-focus-danger: 0 0 0 3px rgba(232, 82, 79, 0.22);

  /* ---------------------------------------------------------------------
     SIZES — heights canónicas para controles
     --------------------------------------------------------------------- */
  /* Tres tamaños en todo el sistema: S · M · L */
  --size-sm:  28px;
  --size-md:  32px;  /* default — botones e inputs */
  --size-lg:  40px;  /* CTAs principales, forms aireados */

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --ease-out:     cubic-bezier(.4, 0, .2, 1);
  --ease-in-out:  cubic-bezier(.4, 0, .2, 1);
  --ease-spring:  cubic-bezier(.34, 1.56, .64, 1);

  --duration-fast:    120ms;
  --duration-normal:  180ms;
  --duration-slow:    280ms;

  --transition:        180ms cubic-bezier(.4, 0, .2, 1);
  --transition-fast:   120ms cubic-bezier(.4, 0, .2, 1);
  --transition-slow:   280ms cubic-bezier(.4, 0, .2, 1);

  /* ---------------------------------------------------------------------
     Z-INDEX
     --------------------------------------------------------------------- */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-drawer:   300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;
  --z-tooltip:  700;

  /* ---------------------------------------------------------------------
     BREAKPOINTS (para documentación; en JS se exportan como objeto)
     --------------------------------------------------------------------- */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
}

/* Densidad compacta (tablas densas, backoffice) */
[data-density="compact"] {
  --size-md:  28px;
  --size-lg:  34px;
  --fs-md:    13px;
  --space-row: var(--space-6);
}