/* MP360 · Ayres de Cardales — tokens
 *
 * Bloque 1: design system aportado por el proyecto (2026-09-14), con sus
 * valores y roles SIN cambios.
 * Bloque 2: decisiones aprobadas del proyecto (tipografía, primario/secundario
 * de marca y estados comerciales de lote). Ver PALETA.md.
 *
 *   Color usage guideline:
 *   Neutral ≈ 60% — dominant
 *   Primary ≈ 30% — supporting
 *   Secondary ≈ 10% — accent
 *   Heuristic, not a strict pixel ratio. System colors and media are excluded.
 */

:root {

  /* ---- Primitive tokens ---- */

  --white: #FFFFFF;

  /* Neutral */
  --neutral-50: #FEFEFE;
  --neutral-100: #F5F5F5;
  --neutral-200: #E8E8E8;
  --neutral-300: #D4D4D4;
  --neutral-400: #B6B6B6;
  --neutral-500: #939393;
  --neutral-600: #717171;
  --neutral-700: #545454;
  --neutral-800: #393939;
  --neutral-900: #232323;
  --neutral-950: #151515;

  /* Primary */
  --primary-50: #ECF7FB;
  --primary-100: #D8ECF2;
  --primary-200: #BAD9E2;
  --primary-300: #9AC2CE;
  --primary-400: #79A8B6;
  --primary-500: #5C8D9A;
  --primary-600: #42707D;
  --primary-700: #2D5661;
  --primary-800: #1E3F48;
  --primary-900: #132B32;
  --primary-950: #0A1C21;

  /* Secondary */
  --secondary-50: #E7F9FE;
  --secondary-100: #CFEEF8;
  --secondary-200: #ABDCEB;
  --secondary-300: #84C7DA;
  --secondary-400: #5DAEC4;
  --secondary-500: #3C94AA;
  --secondary-600: #1E788D;
  --secondary-700: #055E70;
  --secondary-800: #004553;
  --secondary-900: #002F39;
  --secondary-950: #001E25;

  /* Info */
  --info-50: #F0F6FF;
  --info-100: #DBE9FF;
  --info-200: #BAD4FF;
  --info-300: #93BCFF;
  --info-400: #659FFF;
  --info-500: #3B82F6;
  --info-600: #2166D3;
  --info-700: #0F4DAD;
  --info-800: #043784;
  --info-900: #02245D;
  --info-950: #001640;

  /* Success */
  --success-50: #EAFAEF;
  --success-100: #D4F0DD;
  --success-200: #B2DEC1;
  --success-300: #8EC8A4;
  --success-400: #6AAE85;
  --success-500: #4E956C;
  --success-600: #367B54;
  --success-700: #246140;
  --success-800: #16482D;
  --success-900: #0C311D;
  --success-950: #041F11;

  /* Warning */
  --warning-50: #FFF2EC;
  --warning-100: #FFE1D2;
  --warning-200: #FFC3A6;
  --warning-300: #FF9F6D;
  --warning-400: #F97316;
  --warning-500: #D45E00;
  --warning-600: #AC4B00;
  --warning-700: #873900;
  --warning-800: #652900;
  --warning-900: #461A00;
  --warning-950: #2E0F00;

  /* Danger */
  --danger-50: #FFF2F0;
  --danger-100: #FFDFDC;
  --danger-200: #FFC1BB;
  --danger-300: #FF9E96;
  --danger-400: #FF6F68;
  --danger-500: #EF4444;
  --danger-600: #CA212A;
  --danger-700: #A30017;
  --danger-800: #78000E;
  --danger-900: #540006;
  --danger-950: #380003;

  /* Magic */
  --magic-50: #F7F2FF;
  --magic-100: #EEE2FF;
  --magic-200: #DEC6FF;
  --magic-300: #CDA6FF;
  --magic-400: #BB7EFF;
  --magic-500: #A855F7;
  --magic-600: #8B37D4;
  --magic-700: #6F21AE;
  --magic-800: #521184;
  --magic-900: #38085D;
  --magic-950: #250240;

  /* ---- Semantic tokens ---- */

  /* Background */
  --background-canvas: var(--neutral-50);
  --background-surface: var(--white);
  --background-inverse: var(--neutral-900);
  --background-neutral: var(--neutral-50);
  --background-neutral-hover: var(--neutral-100);
  --background-neutral-active: var(--neutral-300);
  --background-neutral-selected: var(--neutral-200);
  --background-primary: var(--primary-600);
  --background-primary-subtle: var(--primary-50);
  --background-primary-hover: var(--primary-700);
  --background-primary-active: var(--primary-900);
  --background-primary-selected: var(--primary-800);
  --background-primary-disabled: var(--primary-200);
  --background-secondary: var(--secondary-600);
  --background-secondary-subtle: var(--secondary-50);
  --background-secondary-hover: var(--secondary-700);
  --background-secondary-active: var(--secondary-900);
  --background-secondary-selected: var(--secondary-800);
  --background-secondary-disabled: var(--secondary-200);
  --background-info: var(--info-600);
  --background-info-subtle: var(--info-50);
  --background-info-hover: var(--info-700);
  --background-info-active: var(--info-900);
  --background-info-selected: var(--info-800);
  --background-info-disabled: var(--info-200);
  --background-success: var(--success-600);
  --background-success-subtle: var(--success-50);
  --background-success-hover: var(--success-700);
  --background-success-active: var(--success-900);
  --background-success-selected: var(--success-800);
  --background-success-disabled: var(--success-200);
  --background-warning: var(--warning-600);
  --background-warning-subtle: var(--warning-50);
  --background-warning-hover: var(--warning-700);
  --background-warning-active: var(--warning-900);
  --background-warning-selected: var(--warning-800);
  --background-warning-disabled: var(--warning-200);
  --background-danger: var(--danger-600);
  --background-danger-subtle: var(--danger-50);
  --background-danger-hover: var(--danger-700);
  --background-danger-active: var(--danger-900);
  --background-danger-selected: var(--danger-800);
  --background-danger-disabled: var(--danger-200);
  --background-magic: var(--magic-600);
  --background-magic-subtle: var(--magic-50);
  --background-magic-hover: var(--magic-700);
  --background-magic-active: var(--magic-900);
  --background-magic-selected: var(--magic-800);
  --background-magic-disabled: var(--magic-200);

  /* Border */
  --border-default: var(--neutral-100);
  --border-primary: var(--primary-600);
  --border-secondary: var(--secondary-600);
  --border-info: var(--info-600);
  --border-success: var(--success-600);
  --border-warning: var(--warning-600);
  --border-danger: var(--danger-600);
  --border-magic: var(--magic-600);

  /* Text */
  --text-body: var(--neutral-800);
  --text-subtle: var(--neutral-500);
  --text-disabled: var(--neutral-300);
  --text-inverse: var(--neutral-50);
  --text-primary: var(--primary-600);
  --text-on-primary: var(--primary-50);
  --text-on-primary-subtle: var(--primary-700);
  --text-secondary: var(--secondary-600);
  --text-on-secondary: var(--secondary-50);
  --text-on-secondary-subtle: var(--secondary-700);
  --text-info: var(--info-600);
  --text-on-info: var(--info-50);
  --text-on-info-subtle: var(--info-700);
  --text-success: var(--success-600);
  --text-on-success: var(--success-50);
  --text-on-success-subtle: var(--success-700);
  --text-warning: var(--warning-600);
  --text-on-warning: var(--warning-50);
  --text-on-warning-subtle: var(--warning-700);
  --text-danger: var(--danger-600);
  --text-on-danger: var(--danger-50);
  --text-on-danger-subtle: var(--danger-700);
  --text-magic: var(--magic-600);
  --text-on-magic: var(--magic-50);
  --text-on-magic-subtle: var(--magic-700);

  /* ---- Shape tokens ---- */

  /* Base: 14px · profile: custom */
  --radius-none: 0px;
  --radius-compact: 10px;
  --radius-control: 14px;
  --radius-container: 22px;
  --radius-prominent: 28px;
  --radius-full: 9999px;
  --radius-circle: 50%;

  /* Special shapes are opt-in by component category, never global. */
  --radius-badge: var(--radius-control);
  --radius-navbar: var(--radius-control);
  --radius-primary-cta: var(--radius-control);
  --radius-pill: var(--radius-badge); /* v3 compatibility only */

  /* Component recipes: outer surfaces use more radius than nested surfaces. */
  --radius-tooltip: var(--radius-compact);
  --radius-micro-surface: var(--radius-compact);
  --radius-button: var(--radius-control);
  --radius-input: var(--radius-control);
  --radius-segmented: var(--radius-control);
  --radius-inner-surface: var(--radius-container);
  --radius-alert: var(--radius-container);
  --radius-card: var(--radius-prominent);
  --radius-modal: var(--radius-prominent);
  --radius-bottom-sheet: var(--radius-prominent);
  --radius-icon-button: var(--radius-circle);
  --radius-divider: var(--radius-none);
  --radius-data-row: var(--radius-none);
  --radius-table-surface: var(--radius-none);

  /* Universal nested-contour principle: scope these inputs to each composition. */
  /* Use for cards, banners, modals, panels or any shapes that follow the same visual corner. */
  /* Independent elements keep their own semantic token and do not use this calculation. */
  --radius-nested-outer: var(--radius-prominent);
  --radius-nested-gap: 8px;
  --radius-nested-min: var(--radius-compact);
  --radius-nested-calculated: max(var(--radius-nested-min), calc(var(--radius-nested-outer) - var(--radius-nested-gap)));

  /* Media inside rounded surfaces must inherit/clip the correct inner curve. */
  /* Inner border curves also subtract border width. Pill CTAs are for isolated actions. */

}

/* ==========================================================================
   Bloque 2 — decisiones aprobadas de Ayres de Cardales (2026-09-14)
   ========================================================================== */
:root {
  /* Tipografía del proyecto: dos roles (Manrope aprobada 2026-09-15, reemplaza
     a Inter).
     display = Josefin Sans: títulos, frases de la precarga, destacados de
               identidad. Pesos 400–700.
     ui      = Manrope 4.504: navegación, botones, subtítulos, textos,
               tooltips, datos y mensajes. Pesos reales 400 / 500 (lectura) y
               600 (acciones); sin 700: no hay archivo y no se sintetiza.
     Los números de los SVG de lote siguen en Josefin (contornos propios). */
  --mp360-font-display: "Josefin Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mp360-font-ui: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mp360-font: var(--mp360-font-ui);          /* alias heredado = interfaz */
  /* Manrope ya viene espaciada para interfaz: sin tracking negativo. */
  --mp360-ui-tracking: 0em;                    /* 15–18 px */
  --mp360-ui-tracking-sm: 0.005em;             /* 12–14 px */
  /* Josefin apoya sus glifos alto en la caja: compensación óptica vertical.
     Manrope no la necesita (usar 0). */
  --mp360-display-optico: 0.12em;

  /* Marca. Coinciden con primitivos del design system. */
  --brand-primary: #2D5661;     /* = --primary-700 */
  --brand-secondary: #5DAEC4;   /* = --secondary-400 */

  /* Estados comerciales de lote. Tokens propios: NO son success/danger ni
     --background-primary (que apunta a primary-600). */
  --lot-available-circle: #FFFFFF;
  --lot-available-number: #2D5661;
  --lot-unavailable-circle: #2D5661;
  --lot-unavailable-number: #FFFFFF;

  /* Motion de la capa externa */
  --mp360-ease-ui: cubic-bezier(0.65, 0, 0.076, 1);
  --mp360-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --mp360-ease-liquid: cubic-bezier(0.34, 1.36, 0.64, 1);
}