/* ============================================================================
   SISTEMA DE DISEÑO — antd-tokens.css
   Ant Design v5 (algoritmo "default", seed #1677ff) mapeado sobre los MISMOS
   nombres de variable que carbon-tokens.css / design-tokens.css, para reusar el
   markup de la calculadora sin tocar el HTML ni el JS.
   Ref: ant.design  · Design Token (Seed/Map/Alias) de Ant Design v5.
   ============================================================================ */

:root {
  /* --- Color · neutrales (antd: gris para bordes/superficies, negro alfa para texto) --- */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #fafafa;              /* table header / fill-quaternary */
  --color-neutral-100: #f5f5f5;              /* colorBgLayout / fill-tertiary */
  --color-neutral-200: #f0f0f0;              /* colorBorderSecondary · bordes de card/divisores */
  --color-neutral-300: #d9d9d9;              /* colorBorder · borde de inputs/botones */
  --color-neutral-400: rgba(0,0,0,0.25);     /* colorTextQuaternary · placeholder */
  --color-neutral-500: rgba(0,0,0,0.45);     /* colorTextTertiary · helper */
  --color-neutral-600: rgba(0,0,0,0.65);     /* colorTextSecondary */
  --color-neutral-700: rgba(0,0,0,0.75);
  --color-neutral-800: rgba(0,0,0,0.85);
  --color-neutral-900: rgba(0,0,0,0.88);     /* colorText · texto primario */

  /* --- Color · marca (antd Blue · colorPrimary #1677ff) ------------------ */
  --color-brand-50:  #e6f4ff;  /* blue-1 */
  --color-brand-100: #bae0ff;  /* blue-2 */
  --color-brand-200: #91caff;  /* blue-3 */
  --color-brand-300: #69b1ff;  /* blue-4 */
  --color-brand-400: #4096ff;  /* blue-5 · colorPrimaryHover */
  --color-brand-500: #1677ff;  /* blue-6 · colorPrimary */
  --color-brand-600: #0958d9;  /* blue-7 · colorPrimaryActive */
  --color-brand-700: #003eb3;  /* blue-8 */
  --color-brand-800: #002c8c;  /* blue-9 */
  --color-brand-900: #001d66;  /* blue-10 */

  /* --- Color · azur → alineado al azul primario de antd ------------------ */
  --color-azure-50:  #e6f4ff;
  --color-azure-100: #bae0ff;
  --color-azure-200: #91caff;
  --color-azure-300: #69b1ff;  /* borde hover suave */
  --color-azure-400: #4096ff;
  --color-azure-500: #1677ff;
  --color-azure-600: #1677ff;  /* links / iconos */
  --color-azure-700: #0958d9;

  /* --- Color · semántico (antd Tag/Alert tokens) ------------------------- */
  --color-success-bg: #f6ffed;  --color-success-fg: #389e0d;  --color-success-border: #b7eb8f;
  --color-warning-bg: #fffbe6;  --color-warning-fg: #d48806;  --color-warning-border: #ffe58f;
  --color-danger-bg:  #fff2f0;  --color-danger-fg:  #cf1322;  --color-danger-border:  #ffccc7;
  --color-info-bg:    #e6f4ff;  --color-info-fg:    #1677ff;  --color-info-border:    #91caff;

  /* --- Aliases semánticos ------------------------------------------------- */
  --bg-canvas:      #f5f5f5;                   /* colorBgLayout */
  --bg-surface:     var(--color-neutral-0);    /* colorBgContainer #fff */
  --bg-subtle:      var(--color-neutral-50);   /* #fafafa */
  --border-default: var(--color-neutral-200);  /* #f0f0f0 */
  --border-strong:  var(--color-neutral-300);  /* #d9d9d9 */
  --text-primary:   var(--color-neutral-900);  /* rgba(0,0,0,.88) */
  --text-secondary: var(--color-neutral-600);  /* rgba(0,0,0,.65) */
  --text-tertiary:  var(--color-neutral-500);  /* rgba(0,0,0,.45) */
  --text-on-brand:  #ffffff;
  --link:           var(--color-brand-500);
  --accent:         var(--color-brand-500);

  /* --- Tipografía (antd: stack de sistema, sin webfont) ------------------ */
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono:  "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

  --text-xs:   0.75rem;    /* 12px · fontSizeSM */
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;   /* 14px · fontSize */
  --text-md:   1rem;       /* 16px · fontSizeLG */
  --text-lg:   1.125rem;   /* 18px · fontSizeHeading4 ~ */
  --text-xl:   1.25rem;    /* 20px · fontSizeHeading3 */
  --text-2xl:  1.5rem;     /* 24px · estadística */
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;  /* antd usa 600 para títulos */
  --leading-tight: 1.25;
  --leading-normal: 1.5714;  /* lineHeight antd */
  --leading-relaxed: 1.6;

  --num-tabular: "tnum" 1;

  /* --- Espaciado (antd, base 8 / sizeStep 4) ----------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* --- Radios (antd: borderRadius 6 / SM 4 / LG 8) ----------------------- */
  --radius-sm: 4px;  --radius-md: 6px;  --radius-lg: 8px;  --radius-xl: 12px;  --radius-full: 9999px;

  /* --- Elevación (antd boxShadow tokens) --------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.03), 0 1px 6px -1px rgba(0,0,0,0.02), 0 2px 4px 0 rgba(0,0,0,0.02);
  --shadow-md: 0 6px 16px 0 rgba(0,0,0,0.08), 0 3px 6px -4px rgba(0,0,0,0.12), 0 9px 28px 8px rgba(0,0,0,0.05);
  --focus-ring: 0 0 0 2px rgba(5,145,255,0.1);   /* controlOutline antd */

  /* --- Layout ------------------------------------------------------------- */
  --container-max: 1200px;
  --content-max:   720px;
  --control-height: 40px;   /* controlHeightLG antd (forma "large") */
}