/*
  Computación Universal — design tokens (línea de estilo IBM / Carbon Design System)
  Fuente única de verdad: todo color/tipografía/espaciado/radio usado en el sitio
  debe venir de aquí. No se agregan valores fuera de este set.

  Paleta y radios tomados de: https://design.ricoui.com/brands/ibm/preview.html
  (IBM Blue #0F62FE, escala de grises Carbon, radios en 0px, IBM Plex Sans/Mono).
*/
:root {
  /* ---- Color ---- */
  --color-primary: #0f62fe;
  --color-primary-deep: #002d9c;
  --color-primary-pressed: #001d6c;
  --color-on-primary: #ffffff;

  --color-brand-blue: #0f62fe;
  --color-brand-blue-dark: #002d9c;
  --color-brand-blue-mid: #4589ff;
  --color-brand-blue-soft: #edf5ff;

  --color-accent-purple: #8a3ffc;
  --color-accent-orange: #fa6e39;
  --color-accent-pink: #f06bb8;
  --color-accent-cyan: #009d9a;

  --color-warning-bg: #fcf4d6;
  --color-warning-text: #684e00;

  --color-canvas: #ffffff;
  --color-canvas-dark: #161616;
  --color-surface: #f4f4f4;
  --color-surface-soft: #f4f4f4;
  --color-surface-feature: #edf5ff;

  --color-hairline: #e0e0e0;
  --color-hairline-soft: #f4f4f4;
  --color-hairline-strong: #c6c6c6;
  --color-hairline-dark: #0f62fe;

  --color-ink: #161616;
  --color-charcoal: #262626;
  --color-slate: #525252;
  --color-steel: #6f6f6f;
  --color-stone: #8d8d8d;
  --color-muted: #a8a8a8;

  --color-on-dark: #ffffff;
  --color-on-dark-muted: #a8a8a8;

  /* ---- Type families ---- */
  --font-primary: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-code: "IBM Plex Mono", "IBM Plex Sans", system-ui, monospace;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* ---- Type scale: size / line-height / letter-spacing ---- */
  --type-hero-display-size: 72px;  --type-hero-display-lh: 1.1;   --type-hero-display-ls: -1.5px;
  --type-display-lg-size: 56px;    --type-display-lg-lh: 1.15;    --type-display-lg-ls: -1px;
  --type-h1-size: 48px;            --type-h1-lh: 1.2;             --type-h1-ls: -0.5px;
  --type-h2-size: 36px;            --type-h2-lh: 1.25;            --type-h2-ls: -0.5px;
  --type-h3-size: 28px;            --type-h3-lh: 1.3;             --type-h3-ls: 0;
  --type-h4-size: 22px;            --type-h4-lh: 1.35;            --type-h4-ls: 0;
  --type-h5-size: 18px;            --type-h5-lh: 1.4;             --type-h5-ls: 0;
  --type-subtitle-size: 18px;      --type-subtitle-lh: 1.5;       --type-subtitle-ls: 0;
  --type-body-md-size: 16px;       --type-body-md-lh: 1.55;       --type-body-md-ls: 0;
  --type-body-sm-size: 14px;       --type-body-sm-lh: 1.5;        --type-body-sm-ls: 0;
  --type-caption-size: 13px;       --type-caption-lh: 1.4;        --type-caption-ls: 0;
  --type-micro-size: 12px;         --type-micro-lh: 1.4;          --type-micro-ls: 0;
  --type-micro-uc-size: 11px;      --type-micro-uc-lh: 1.14;      --type-micro-uc-ls: 1px;
  --type-button-md-size: 14px;     --type-button-md-lh: 1.3;      --type-button-md-ls: 0;
  --type-code-md-size: 14px;       --type-code-md-lh: 1.55;       --type-code-md-ls: 0;

  /* ---- Spacing scale ---- */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 40px;
  --space-section-sm: 40px;
  --space-section: 48px;
  --space-section-lg: 72px;
  --space-hero: 80px;

  /* ---- Radius ----
     Carbon standard: 0px en todos los componentes primarios (botones, cards,
     inputs, tags, modales). Sin esquinas redondeadas. */
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-xxl: 0px;
  --radius-full: 0px;

  /* ---- Layout ---- */
  --layout-section-gap: 64px;
  --layout-card-padding: 20px;
  --layout-element-gap: 16px;
  --layout-max-width: 1200px;

  /* ---- Shadows ----
     Carbon evita sombras/elevación pesada: se usan bordes planos en su lugar. */
  --shadow-card: none;
  --shadow-card-hover: none;
}