/* Fuente única de verdad para color, tipografía, espaciado, radios y bordes.
   Generado a partir de design/colors.md, design/typography.md, design/spacing.md,
   design/border-radius.md y design/border-width.md. No editar valores aquí sin
   actualizar antes el .md correspondiente — ver AGENTS.md. */

:root {
  /* colors.md §1.1 — primitive blue */
  --blue-50: #F3F8FF;
  --blue-100: #E7F0FF;
  --blue-200: #C4DBFE;
  --blue-300: #A0C5FD;
  --blue-400: #5999FC;
  --blue-500: #126DFA;
  --blue-600: #0E5CD4;
  --blue-700: #0B4AAD;
  --blue-800: #06347D;
  --blue-900: #00163A;

  /* colors.md §1.2 — primitive neutral */
  --neutral-50: #F6F7F9;
  --neutral-100: #EBEDF1;
  --neutral-200: #DADEE4;
  --neutral-300: #C6CCD6;
  --neutral-400: #9EA8B7;
  --neutral-500: #778398;
  --neutral-600: #53627C;
  --neutral-700: #324461;
  --neutral-800: #14284A;
  --neutral-900: #00163A;

  /* colors.md §1.3 — primitive accent (rasgo de identidad, ver §1.3.1: máx. 35% del área, nunca color de estado) */
  --accent-50: #FEF6F4;
  --accent-100: #FCE8E5;
  --accent-200: #F9D0C9;
  --accent-300: #F4AA9E;
  --accent-400: #EE7B68;
  --accent-500: #E74327;
  --accent-600: #C43921;
  --accent-700: #9D2E1B;
  --accent-800: #742214;
  --accent-900: #4A150C;

  /* colors.md §1.4 — escalas de estado */
  --success-50: #EAF6ED;
  --success-100: #CCE8D2;
  --success-500: #31A24C;
  --success-700: #206931;
  --success-900: #0C2913;

  --attention-50: #FEF6E8;
  --attention-100: #FCEAC5;
  --attention-500: #F2A918;
  --attention-600: #C28713;
  --attention-700: #855D0D;
  --attention-900: #3D2A06;

  --warning-50: #FEF9EE;
  --warning-100: #FDEEC9;
  --warning-500: #F7B928;
  --warning-600: #AD821C;
  --warning-700: #6F5312;
  --warning-900: #3E2E0A;

  --critical-50: #FDEDF0;
  --critical-100: #F8C7CF;
  --critical-500: #E41E3F;
  --critical-700: #941429;
  --critical-900: #390810;
  --critical-strong: #F0284A;

  /* colors.md §1.5 — absolutos */
  --white: #FFFFFF;

  /* colors.md §2 — semantic tokens (solo light: el sitio no tiene modo oscuro) */
  --text-default: var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-muted: var(--neutral-500);
  --text-disabled: var(--neutral-400);
  --text-placeholder: var(--neutral-400);
  --text-inverse: var(--white);
  --text-on-brand: var(--white);
  --icon-default: var(--text-default);
  --icon-secondary: var(--text-secondary);
  --icon-muted: var(--text-muted);

  --background-default: var(--white);
  --background-secondary: var(--neutral-50);
  --background-subtle: var(--neutral-100);
  --background-inverse: var(--neutral-900);
  --background-brand: var(--blue-500);

  --surface-default: var(--white);
  --surface-secondary: var(--neutral-50);
  --surface-raised: var(--white);
  --surface-raised-shadow: 0 20px 55px rgba(0, 22, 58, 0.12);

  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-500);
  --border-disabled: var(--neutral-200);
  --border-selected: var(--blue-500);
  --border-focus: var(--blue-500);

  --action-primary-default: var(--blue-500);
  --action-primary-hover: var(--blue-600);
  --action-primary-pressed: var(--blue-700);
  --action-primary-disabled: var(--neutral-300);
  --action-primary-foreground: var(--white);
  --action-link-default: var(--blue-500);
  --action-link-hover: var(--blue-600);

  --feedback-success-background: var(--success-50);
  --feedback-success-foreground: var(--success-700);
  --feedback-success-border: var(--success-500);
  --feedback-attention-background: var(--attention-50);
  --feedback-attention-foreground: var(--attention-700);
  --feedback-attention-border: var(--attention-600);
  --feedback-warning-background: var(--warning-50);
  --feedback-warning-foreground: var(--warning-700);
  --feedback-warning-border: var(--warning-600);
  --feedback-critical-background: var(--critical-50);
  --feedback-critical-foreground: var(--critical-700);
  --feedback-critical-border: var(--critical-500);

  /* colors.md §2.6 — component token */
  --input-border-error: var(--critical-strong);

  /* typography.md §0 */
  --font-family-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* typography.md §1.1 */
  --font-size-100: 0.625rem;
  --font-size-150: 0.75rem;
  --font-size-175: 0.875rem;
  --font-size-200: 1rem;
  --font-size-225: 1.125rem;
  --font-size-300: 1.5rem;
  --font-size-400: 2rem;
  --font-size-500: 2.5rem;
  --font-size-600: 3rem;

  /* typography.md §1.2 */
  --line-height-100: 1rem;
  --line-height-150: 1.25rem;
  --line-height-175: 1.5rem;
  --line-height-200: 1.75rem;
  --line-height-225: 2rem;
  --line-height-300: 2.25rem;
  --line-height-400: 2.75rem;
  --line-height-500: 3.5rem;
  --line-height-600: 4rem;

  /* typography.md §1.3 */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;

  /* typography.md §1.4 */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* typography.md §2 — estilos de texto compuestos (desktop ≥768px) */
  --text-display-lg-size: var(--font-size-600);
  --text-display-lg-line: var(--line-height-600);
  --text-display-lg-tracking: var(--letter-spacing-tight);
  --text-display-lg-weight: var(--font-weight-semibold);

  --text-display-md-size: var(--font-size-500);
  --text-display-md-line: var(--line-height-500);
  --text-display-md-tracking: var(--letter-spacing-tight);
  --text-display-md-weight: var(--font-weight-semibold);

  --text-heading-xl-size: var(--font-size-400);
  --text-heading-xl-line: var(--line-height-400);
  --text-heading-xl-tracking: var(--letter-spacing-tight);
  --text-heading-xl-weight: var(--font-weight-semibold);

  --text-heading-lg-size: var(--font-size-300);
  --text-heading-lg-line: var(--line-height-300);
  --text-heading-lg-tracking: var(--letter-spacing-tight);
  --text-heading-lg-weight: var(--font-weight-semibold);

  --text-heading-md-size: var(--font-size-225);
  --text-heading-md-line: var(--line-height-225);
  --text-heading-md-tracking: var(--letter-spacing-tight);
  --text-heading-md-weight: var(--font-weight-semibold);

  --text-heading-sm-size: var(--font-size-200);
  --text-heading-sm-line: var(--line-height-200);
  --text-heading-sm-tracking: var(--letter-spacing-normal);
  --text-heading-sm-weight: var(--font-weight-semibold);

  --text-heading-xs-size: var(--font-size-175);
  --text-heading-xs-line: var(--line-height-175);
  --text-heading-xs-tracking: var(--letter-spacing-normal);
  --text-heading-xs-weight: var(--font-weight-semibold);

  --text-heading-2xs-size: var(--font-size-150);
  --text-heading-2xs-line: var(--line-height-150);
  --text-heading-2xs-tracking: var(--letter-spacing-normal);
  --text-heading-2xs-weight: var(--font-weight-semibold);

  --text-body-lg-size: var(--font-size-200);
  --text-body-lg-line: var(--line-height-200);
  --text-body-lg-tracking: var(--letter-spacing-wide);
  --text-body-lg-weight: var(--font-weight-regular);

  --text-body-md-size: var(--font-size-175);
  --text-body-md-line: var(--line-height-175);
  --text-body-md-tracking: var(--letter-spacing-wide);
  --text-body-md-weight: var(--font-weight-regular);

  --text-body-sm-size: var(--font-size-150);
  --text-body-sm-line: var(--line-height-150);
  --text-body-sm-tracking: var(--letter-spacing-wide);
  --text-body-sm-weight: var(--font-weight-regular);

  --text-body-xs-size: var(--font-size-100);
  --text-body-xs-line: var(--line-height-100);
  --text-body-xs-tracking: var(--letter-spacing-wide);
  --text-body-xs-weight: var(--font-weight-regular);

  /* spacing.md §1 — space-01 se mantiene en px (uso exclusivo bordes/hairline, §1.1) */
  --space-01: 1px;
  --space-02: 0.125rem;
  --space-03: 0.25rem;
  --space-04: 0.5rem;
  --space-05: 0.75rem;
  --space-06: 1rem;
  --space-07: 1.5rem;
  --space-08: 2rem;
  --space-09: 2.5rem;
  --space-10: 3rem;
  --space-11: 4rem;
  --space-12: 5rem;
  --space-13: 6rem;
  --space-14: 10rem;

  /* border-radius.md §1 */
  --radius-xsmall: 2px;
  --radius-small: 4px;
  --radius-medium: 6px;
  --radius-large: 8px;
  --radius-xlarge: 12px;
  --radius-xxlarge: 16px;
  --radius-full: 999px;

  /* border-radius.md §3 — radio del anillo de foco = radio del elemento + 2px */
  --radius-focus-xsmall: 4px;
  --radius-focus-small: 6px;
  --radius-focus-medium: 8px;
  --radius-focus-large: 10px;
  --radius-focus-xlarge: 14px;
  --radius-focus-xxlarge: 18px;

  /* border-width.md §1 */
  --border-width-default: 1px;
  --border-width-selected: 2px;
  --border-width-focus: 2px;

  /* Alias de compatibilidad: el widget de chat/ayuda flotante (.whatsapp-*
     en sikio-site-shell.css) está fuera de alcance de esta migración y
     sigue usando estos nombres de variable antiguos. No usar en código nuevo. */
  --ink: var(--text-default);
  --blue: var(--action-primary-default);
  --line: var(--border-default);
  --green: var(--feedback-success-border);
}

/* typography.md §2.4 — breakpoint único en 768px; solo display.* y los heading.*
   superiores cambian en mobile, body.* permanece igual en ambos breakpoints */
@media (max-width: 767px) {
  :root {
    --text-display-lg-size: var(--font-size-400);
    --text-display-lg-line: var(--line-height-400);

    --text-display-md-size: var(--font-size-300);
    --text-display-md-line: var(--line-height-300);

    --text-heading-xl-size: var(--font-size-300);
    --text-heading-xl-line: var(--line-height-300);

    --text-heading-lg-size: var(--font-size-225);
    --text-heading-lg-line: var(--line-height-225);
  }
}