/* ============================================================================
   SISTEMA DE DISEÑO — carbon-tokens.css
   IBM Carbon Design System (v11, tema White) mapeado sobre los MISMOS nombres
   de variable que design-tokens.css, para reusar el markup de la calculadora.
   Ref: carbondesignsystem.com  · color/spacing/type tokens de Carbon.
   ============================================================================ */

:root {
  /* --- Color · neutrales (Carbon Gray) ----------------------------------- */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f4f4f4;  /* layer-01 / field-01 */
  --color-neutral-100: #f4f4f4;  /* gray-10 */
  --color-neutral-200: #e0e0e0;  /* gray-20 · border-subtle */
  --color-neutral-300: #8d8d8d;  /* gray-50 · border-strong */
  --color-neutral-400: #a8a8a8;  /* gray-40 · placeholder */
  --color-neutral-500: #6f6f6f;  /* gray-60 · text-helper */
  --color-neutral-600: #525252;  /* gray-70 · text-secondary */
  --color-neutral-700: #393939;  /* gray-80 */
  --color-neutral-800: #262626;  /* gray-90 */
  --color-neutral-900: #161616;  /* gray-100 · text-primary */

  /* --- Color · marca (Carbon Blue · interactive) ------------------------- */
  --color-brand-50:  #edf5ff;  /* blue-10 */
  --color-brand-100: #d0e2ff;  /* blue-20 */
  --color-brand-200: #a6c8ff;  /* blue-30 */
  --color-brand-300: #78a9ff;  /* blue-40 */
  --color-brand-400: #4589ff;  /* blue-50 */
  --color-brand-500: #0f62fe;  /* blue-60 · $interactive / $button-primary */
  --color-brand-600: #0353e9;  /* blue-70 · hover */
  --color-brand-700: #0043ce;  /* blue-80 */
  --color-brand-800: #002d9c;  /* blue-90 · active */
  --color-brand-900: #001d6c;  /* blue-100 */

  /* --- Color · azur → se alinea al azul interactivo de Carbon ------------ */
  --color-azure-50:  #edf5ff;
  --color-azure-100: #d0e2ff;
  --color-azure-200: #a6c8ff;
  --color-azure-300: #78a9ff;
  --color-azure-400: #4589ff;
  --color-azure-500: #0f62fe;
  --color-azure-600: #0f62fe;  /* links / iconos */
  --color-azure-700: #0043ce;

  /* --- Color · semántico (Carbon notification colors) -------------------- */
  --color-success-bg: #defbe6;  --color-success-fg: #0e6027;  --color-success-border: #24a148;
  --color-warning-bg: #fcf4d6;  --color-warning-fg: #684e00;  --color-warning-border: #f1c21b;
  --color-danger-bg:  #fff1f1;  --color-danger-fg:  #da1e28;  --color-danger-border:  #da1e28;
  --color-info-bg:    #edf5ff;  --color-info-fg:    #0043ce;  --color-info-border:    #0f62fe;

  /* --- Aliases semánticos ------------------------------------------------- */
  --bg-canvas:      var(--color-neutral-0);   /* #ffffff (tema White) */
  --bg-surface:     var(--color-neutral-0);
  --bg-subtle:      var(--color-neutral-100);  /* layer #f4f4f4 */
  --border-default: var(--color-neutral-200);  /* #e0e0e0 */
  --border-strong:  var(--color-neutral-300);  /* #8d8d8d */
  --text-primary:   var(--color-neutral-900);  /* #161616 */
  --text-secondary: var(--color-neutral-600);  /* #525252 */
  --text-tertiary:  var(--color-neutral-500);  /* #6f6f6f */
  --text-on-brand:  #ffffff;
  --link:           var(--color-brand-500);
  --accent:         var(--color-brand-500);

  /* --- Tipografía (IBM Plex) --------------------------------------------- */
  --font-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --text-xs:   0.75rem;    /* label-01 / helper 12px */
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;   /* body-compact-01 14px */
  --text-md:   1rem;
  --text-lg:   1.125rem;   /* heading-compact-02 */
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  --weight-regular: 400;
  --weight-medium:  600;   /* Carbon usa 600 para énfasis (no 500) */
  --weight-semibold: 600;
  --leading-tight: 1.25;
  --leading-normal: 1.43;  /* body-compact line-height */
  --leading-relaxed: 1.6;

  --num-tabular: "tnum" 1, "lnum" 1;

  /* --- Espaciado (Carbon spacing, base 4px) ------------------------------ */
  --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 (Carbon = esquinas rectas) --------------------------------- */
  --radius-sm: 0;  --radius-md: 0;  --radius-lg: 0;  --radius-xl: 0;  --radius-full: 9999px;

  /* --- Elevación (Carbon es plano; sombra solo en overlays) -------------- */
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-md: 0 2px 6px rgba(0,0,0,0.2);
  --focus-ring: inset 0 0 0 2px var(--color-brand-500);  /* foco 2px Carbon */

  /* --- Layout ------------------------------------------------------------- */
  --container-max: 1200px;
  --content-max:   720px;
  --control-height: 40px;   /* field height Carbon */
}