/* ================================
   Asofix Design System — Tokens
   v2.0
   ================================ */
:root {
  /* --------------------------------
     Primario — Violeta
  -------------------------------- */
  --color-primary-50:  #F5F1FC;
  --color-primary-100: #DDD4F5;
  --color-primary-200: #C4B5EE;
  --color-primary-300: #A48FE4;
  --color-primary-400: #7F64DB;
  --color-primary-500: #5B3DD3;
  --color-primary-600: #4D33B4;
  --color-primary-700: #3E2990;
  --color-primary-800: #2E1B6E;
  --color-primary-900: #1A0F4A;

  /* --------------------------------
     Secundario — Teal
  -------------------------------- */
  --color-secondary-50:  #E3F8EF;
  --color-secondary-100: #AEECD6;
  --color-secondary-200: #79E0BC;
  --color-secondary-300: #3FE3B5;
  --color-secondary-400: #29C99C;
  --color-secondary-500: #18B086;
  --color-secondary-600: #0E9970;

  /* --------------------------------
     Paper — fondos cálidos (Manual de Marca V3)
  -------------------------------- */
  --color-paper-50:  #FBFAF7;
  --color-paper-100: #F4F1EC;
  --color-paper-200: #E8E2DC;

  /* --------------------------------
     Neutros — escala Ink (reemplaza escala violeta V2.1, definida 2026-08-20)
  -------------------------------- */
  --color-neutral-50:  #F7F6FA;
  --color-neutral-100: #EEECF2;
  --color-neutral-200: #DAD7E1;
  --color-neutral-300: #B4AEC2;
  --color-neutral-400: #898298;
  --color-neutral-500: #605B70;
  --color-neutral-600: #33334D;
  --color-neutral-700: #22223A;
  --color-neutral-800: #161628;
  --color-neutral-900: #0B0B14;
  --color-neutral-white: #FFFFFF;

  /* Fondo dark — modo oscuro, evitar negro puro (Manual de Marca V3) */
  --color-surface-dark: #0E073D;

   /* --------------------------------
     Error — Rojo
  -------------------------------- */
  --color-error-50:  #FFF5F5;
  --color-error-100: #FFE6E6;
  --color-error-200: #FFC2C2;
  --color-error-300: #FF8F8F;
  --color-error-400: #FF4D4D;
  --color-error-500: #E01B1B;
  --color-error-600: #C02020;
  --color-error-700: #911818;
  --color-error-800: #611010;
  --color-error-900: #3D0A0A;

  /* --------------------------------
     Success — Verde
  -------------------------------- */
  --color-success-50:  #F6FEF6;
  --color-success-100: #ECF9EC;
  --color-success-200: #D1F2D1;
  --color-success-300: #A8E7A8;
  --color-success-400: #74D674;
  --color-success-500: #40C040;
  --color-success-600: #36A436;
  --color-success-700: #2C872C;
  --color-success-800: #216621;
  --color-success-900: #164416;

  /* --------------------------------
     Info — Celeste
  -------------------------------- */
  --color-info-50:  #F5FDFF;
  --color-info-100: #EBFAFF;
  --color-info-200: #CCF1FF;
  --color-info-300: #99E3FF;
  --color-info-400: #66D1F5;
  --color-info-500: #40A0C0;
  --color-info-600: #3A91AD;
  --color-info-700: #368099;
  --color-info-800: #2B667A;
  --color-info-900: #1B404D;

  /* --------------------------------
     Warning — Amarillo
  -------------------------------- */
  --color-warning-50:  #FFFCF2;
  --color-warning-100: #FFF8E6;
  --color-warning-200: #FFEDCC;
  --color-warning-300: #FFDB99;
  --color-warning-400: #FFCE66;
  --color-warning-500: #FFC020;
  --color-warning-600: #FFAD00;
  --color-warning-700: #FF9900;
  --color-warning-800: #CC7A00;
  --color-warning-900: #804C00;

  /* --------------------------------
     Copper — acento (Manual de Marca V3)
     Uso: KPIs de alto peso. No tiene escala completa definida.
  -------------------------------- */
  --color-copper-500: #C97B4A;

  /* ================================
     Capa semántica
     Principio de dos capas (Andrés): la paleta cruda (--color-*) de arriba
     es de uso exclusivo del mantenimiento del DS. Componentes y prototipos
     consumen SOLO estos semánticos — así un cambio de paleta no rompe nada
     río abajo. Ver documentación completa en foundations/colors.html.
  ================================ */

  /* Background */
  --bg-canvas: var(--color-paper-50);
  --bg-surface: var(--color-neutral-white);
  --bg-surface-hover: var(--color-neutral-50);
  --bg-subtle: var(--color-neutral-100);
  --bg-disabled: var(--color-paper-100);
  --bg-sunken: var(--color-paper-100);
  --bg-inverse: var(--color-surface-dark);

  /* Border */
  --border-default: var(--color-paper-200);
  --border-strong: var(--color-neutral-300);
  --border-hover: var(--color-neutral-600);
  --border-focus: var(--color-primary-500);
  --border-error: var(--color-error-500);
  --ring-focus: var(--color-primary-300);

  /* Text */
  --text-primary: var(--color-neutral-900);
  --text-body: var(--color-neutral-800);
  --text-field: var(--color-neutral-600);
  /* Faltaba: .input__label-text (components.css) ya lo referenciaba sin que existiera,
     así que las labels de Input/Select renderizaban con el color heredado en vez del propio.
     Mismo valor que --text-field (neutral-600) pero como rol semántico aparte: texto con
     énfasis leve (labels), no el texto de contenido de un campo. */
  --text-emphasis: var(--color-neutral-600);
  --text-secondary: var(--color-neutral-500);
  --text-placeholder: var(--color-neutral-400);
  --text-disabled: var(--color-neutral-400);
  /* Texto blanco sobre cualquier fondo saturado/oscuro: botones sólidos, badges, tooltip, avatar.
     Antes eran 3 tokens (--text-on-primary/--text-on-solid/--text-inverse) para el mismo valor,
     diferenciados solo por qué componente los usaba, no por un valor distinto. Consolidados acá. */
  --text-inverse: var(--color-neutral-white);
  /* Texto de error sobre fondo claro (ej. mensaje de error de un input). Distinto de
     --feedback-error-text (error-700): ese es para texto dentro de un banner de feedback,
     sobre fondo teñido, y necesita más contraste. Este es error-500, el mismo tono del borde. */
  --text-error: var(--color-error-500);

  /* Solid — fondos saturados de alto contraste, sin versión tenue de fondo (a diferencia de
     Feedback). Lo comparten Badge y el estado Empty de Avatar. */
  --solid-warning: var(--color-warning-700);
  --solid-error: var(--color-error-500);
  --solid-neutral: var(--color-neutral-500);

  /* Acción */
  --action-primary: var(--color-primary-500);
  --action-primary-hover: var(--color-primary-600);
  --action-primary-active: var(--color-primary-700);
  --action-primary-subtle: var(--color-primary-50);
  --action-primary-subtle-active: var(--color-primary-100);
  --action-primary-hover-subtle: var(--color-primary-400);
  --action-secondary: var(--color-secondary-500);
  --action-secondary-hover: var(--color-secondary-600);
  --action-danger: var(--color-error-500);
  --action-danger-hover: var(--color-error-600);
  --action-danger-active: var(--color-error-700);
  --ring-danger: var(--color-error-300);
  --accent: var(--color-copper-500);

  /* Feedback — Error */
  --feedback-error-bg: var(--color-error-50);
  --feedback-error-bg-hover: var(--color-error-100);
  --feedback-error-border: var(--color-error-200);
  --feedback-error-text: var(--color-error-700);
  --feedback-error-icon: var(--color-error-500);

  /* Feedback — Success */
  --feedback-success-bg: var(--color-success-50);
  --feedback-success-bg-hover: var(--color-success-100);
  --feedback-success-border: var(--color-success-200);
  --feedback-success-text: var(--color-success-700);
  --feedback-success-icon: var(--color-success-500);

  /* Feedback — Info */
  --feedback-info-bg: var(--color-info-50);
  --feedback-info-bg-hover: var(--color-info-100);
  --feedback-info-border: var(--color-info-200);
  --feedback-info-text: var(--color-info-700);
  --feedback-info-icon: var(--color-info-500);

  /* Feedback — Warning */
  --feedback-warning-bg: var(--color-warning-50);
  --feedback-warning-bg-hover: var(--color-warning-100);
  --feedback-warning-border: var(--color-warning-200);
  --feedback-warning-text: var(--color-warning-700);
  --feedback-warning-icon: var(--color-warning-500);

  /* --------------------------------
     Pill — escala propia, más contraste que Feedback
     (pensada para leerse sola, sin el apoyo de un banner)
  -------------------------------- */
  --pill-default-bg: var(--color-neutral-50);
  --pill-default-border: var(--color-neutral-200);
  --pill-default-text: var(--color-neutral-700);
  --pill-default-bg-hover: var(--color-neutral-100);
  --pill-default-bg-active: var(--color-neutral-200);
  --pill-default-focus-border: var(--color-neutral-600);

  --pill-error-bg: var(--color-error-50);
  --pill-error-border: var(--color-error-200);
  --pill-error-text: var(--color-error-800);
  --pill-error-bg-hover: var(--color-error-100);
  --pill-error-bg-active: var(--color-error-200);
  --pill-error-focus-border: var(--color-error-600);
  --pill-error-disabled-text: var(--color-error-300);

  --pill-success-bg: var(--color-success-50);
  --pill-success-border: var(--color-success-200);
  --pill-success-text: var(--color-success-800);
  --pill-success-bg-hover: var(--color-success-100);
  --pill-success-bg-active: var(--color-success-200);
  --pill-success-focus-border: var(--color-success-600);
  --pill-success-disabled-border: var(--color-success-400);
  --pill-success-disabled-text: var(--color-success-400);

  --pill-warning-bg: var(--color-warning-50);
  --pill-warning-border: var(--color-warning-300);
  --pill-warning-text: var(--color-warning-900);
  --pill-warning-bg-hover: var(--color-warning-100);
  --pill-warning-bg-active: var(--color-warning-200);
  --pill-warning-focus-border: var(--color-warning-700);
  --pill-warning-disabled-text: var(--color-warning-500);

  --pill-info-bg: var(--color-info-50);
  --pill-info-border: var(--color-info-200);
  --pill-info-text: var(--color-info-800);
  --pill-info-bg-hover: var(--color-info-100);
  --pill-info-bg-active: var(--color-info-200);
  --pill-info-focus-border: var(--color-info-600);
  --pill-info-disabled-text: var(--color-info-400);

  /* Pill — Highlight (variante puntual, paleta propia) */
  --pill-highlight-warning-bg: var(--color-warning-200);
  --pill-highlight-warning-border: var(--color-warning-700);
  --pill-highlight-warning-text: var(--color-warning-900);
  --pill-highlight-secondary-bg: var(--color-secondary-50);
  --pill-highlight-secondary-border: var(--color-secondary-600);
  --pill-highlight-secondary-text: var(--color-secondary-600);
  --pill-highlight-primary-bg: var(--color-primary-50);
  --pill-highlight-primary-border: var(--color-primary-500);
  --pill-highlight-primary-text: var(--color-primary-500);

  /* --------------------------------
     Tipografía — Inter
     (Reemplaza Open Sans)
  -------------------------------- */
  --font-family-base: 'Inter', sans-serif;

  /* --------------------------------
     Tipografía — Display (Manual de Marca V3)
     Uso puntual en headlines grandes (ej. login, hero de Inicio).
     No reemplaza la escala de headings de componentes (h1-h6 siguen en Inter).
     La página que la use debe cargar la fuente (Google Fonts: IBM+Plex+Sans).
  -------------------------------- */
  --font-family-display: 'IBM Plex Sans', var(--font-family-base);
  --font-weight-display: 300;
  --font-size-display: 2rem;     /* 32px */
  --line-height-display: 1.25;
  --letter-spacing-display: -0.01em;

  /* Headings */
  --font-size-h1: 2.25rem;     /* 36px */
  --font-size-h2: 1.75rem;     /* 28px */
  --font-size-h3: 1.5625rem;   /* 25px */
  --font-size-h4: 1.375rem;    /* 22px */
  --font-size-h5: 1.25rem;     /* 20px */
  --font-size-h6: 1.125rem;    /* 18px */
  --font-weight-heading: 600;
  --line-height-h1: 1.55;
  --line-height-h2: 1.58;
  --line-height-h3: 1.60;
  --line-height-h4: 1.46;
  --line-height-h5: 1.40;
  --line-height-h6: 1.36;
  --letter-spacing-h1: -0.02em;
  --letter-spacing-h2: -0.02em;
  --letter-spacing-h3: -0.02em;
  --letter-spacing-h4: -0.01em;
  --letter-spacing-h5: -0.01em;
  --letter-spacing-h6: 0em;

  /* Subtitle */
  --font-size-subtitle-1: 1rem;           /* 16px */
  --font-weight-subtitle-1: 600;
  --line-height-subtitle-1: 1.5;
  --letter-spacing-subtitle-1: 0em;

  --font-weight-subtitle-1-emphasized: 700;
  --letter-spacing-subtitle-1-emphasized: 0.01em;
  /* Alias: en Figma esta escala comparte tamaño y alto con subtitle-1 (solo cambian peso y
     tracking). Se declaran igual para que exista el set completo y nadie tenga que adivinar
     cuáles se comparten — al ser alias no pueden desincronizarse. */
  --font-size-subtitle-1-emphasized: var(--font-size-subtitle-1);
  --line-height-subtitle-1-emphasized: var(--line-height-subtitle-1);

  --font-size-subtitle-2: 0.875rem;       /* 14px */
  --font-weight-subtitle-2: 700;
  --line-height-subtitle-2: 1.45;
  --letter-spacing-subtitle-2: 0.01em;

  /* Body */
  --font-size-body: 0.875rem;       /* 14px */
  --font-weight-body: 400;
  --font-weight-body-emphasized: 600;
  --font-weight-body-strikethrough: 600;
  --line-height-body: 1.45;
  --letter-spacing-body: 0em;
  /* Alias: body-emphasized y body-strikethrough comparten métrica con body (solo cambia el peso) */
  --font-size-body-emphasized: var(--font-size-body);
  --line-height-body-emphasized: var(--line-height-body);
  --letter-spacing-body-emphasized: var(--letter-spacing-body);
  --font-size-body-strikethrough: var(--font-size-body);
  --line-height-body-strikethrough: var(--line-height-body);
  --letter-spacing-body-strikethrough: var(--letter-spacing-body);

  /* Caption */
  --font-size-caption: 0.75rem;     /* 12px */
  --font-weight-caption: 400;
  --font-weight-caption-emphasized: 600;
  --line-height-caption: 1.36;
  --letter-spacing-caption: 0.02em;
  /* Alias: caption-emphasized comparte métrica con caption (solo cambia el peso) */
  --font-size-caption-emphasized: var(--font-size-caption);
  --line-height-caption-emphasized: var(--line-height-caption);
  --letter-spacing-caption-emphasized: var(--letter-spacing-caption);

  /* Button (igual en Desktop y Mobile) */
  --font-size-button-1: 0.875rem;   /* 14px */
  --font-weight-button: 600;
  --line-height-button-1: 1.45;
  --letter-spacing-button-1: 0em;

  --font-size-button-2: 0.75rem;    /* 12px */
  --line-height-button-2: 1.36;
  --letter-spacing-button-2: 0.02em;

  --color-button-text: var(--color-primary-500);

  /* --------------------------------
     Radius
  -------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* --------------------------------
     Spacing
     Base 4px. --space-N = N × 4px. Uso: gap, padding, margin — no para
     dimensiones de componente (width/height/font-size), aunque compartan
     el mismo número.
  -------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --------------------------------
     Elevation (shadow)
  -------------------------------- */
  --shadow-low: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  --shadow-mid: 0px 4px 12px -2px rgba(0, 0, 0, 0.12);
  --shadow-high: 0px 16px 48px -4px rgba(0, 0, 0, 0.15);
}

/* --------------------------------
   Tipografía — Mobile
   Headings y Subtitle 1 cambian de tamaño en mobile.
   Subtitle 2, Body, Caption y Button son iguales en ambos modos.
-------------------------------- */
[data-typography="mobile"] {
  --font-size-h1: 2.188rem;    /* 35px */
  --line-height-h1: 1.60;
  --letter-spacing-h1: -0.01em;

  --font-size-h2: 1.5rem;      /* 24px */
  --line-height-h2: 1.65;
  --letter-spacing-h2: 0em;

  --font-size-h3: 1.375rem;    /* 22px */
  --line-height-h3: 1.45;
  --letter-spacing-h3: 0em;

  --font-size-h4: 1.25rem;     /* 20px */
  --line-height-h4: 1.42;
  --letter-spacing-h4: 0em;

  --font-size-h5: 1.125rem;    /* 18px */
  --line-height-h5: 1.35;
  --letter-spacing-h5: 0em;

  --font-size-h6: 1.063rem;    /* 17px */
  --line-height-h6: 1.44;
  --letter-spacing-h6: 0.01em;

  --font-size-subtitle-1: 0.938rem;  /* 15px */
  --line-height-subtitle-1: 1.60;
}