/* Tokens de PYG Tech — paleta Ink & Cream v2.0.
   Copia de docs/referencias/variables.css con tres ajustes para la web:
   Matter se sustituye por Space Grotesk, se agrega Space Mono para
   etiquetas y cifras, y --card-padding pasa a ser un valor CSS válido. */
:root {
  /* Colors — Neutrals (Ink & Cream) */
  --color-ink: #0b1016;
  --color-deep-ink: #121821;
  --color-slate: #222a35;
  --color-hover-slate: #2c3542;
  --color-mid-slate: #465162;
  --color-blue-stone: #9aa2ad;
  --color-cream: #ece8dc;

  /* Colors — Accent (Powder Blue scale) */
  --color-blue-tint-dark: #16233a;
  --color-blue-deep: #3d5f8f;
  --color-blue-pressed: #5f86bd;
  --color-powder-blue: #86a8d8;
  --color-blue-hover: #a5c0e6;
  --color-blue-tint-light: #dbe6f3;

  /* Colors — Functional (product only, never marketing) */
  --color-success: #8fb39a;
  --color-warning: #d8b36a;
  --color-error: #e07a72;
  --color-info: #ece8dc;

  /* Colors — Data visualization (series order, max 5) */
  --color-chart-1: #86a8d8;
  --color-chart-2: #ece8dc;
  --color-chart-3: #8fb39a;
  --color-chart-4: #9aa2ad;
  --color-chart-5: #d8b36a;

  /* Colors — Semantic aliases */
  --color-bg: var(--color-ink);
  --color-text: var(--color-cream);
  --color-text-muted: var(--color-blue-stone);
  --color-border: var(--color-mid-slate);
  --color-accent: var(--color-powder-blue);
  --color-on-accent: var(--color-ink);
  --color-focus-ring: var(--color-powder-blue);
  --color-bg-light: var(--color-cream);
  --color-text-on-light: var(--color-ink);
  --color-accent-on-light: var(--color-blue-deep);

  /* Typography — Font Families */
  --font-matter: 'Matter', 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Typography — Scale */
  --text-caption: 10px;
  --leading-caption: 1.4;
  --tracking-caption: 1.5px;
  --text-body: 16px;
  --leading-body: 1.4;
  --tracking-body: 0px;
  --text-subheading: 24px;
  --leading-subheading: 1.3;
  --tracking-subheading: -0.48px;
  --text-heading: 36px;
  --leading-heading: 1;
  --tracking-heading: 0px;
  --text-heading-lg: 61px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -2.44px;
  --text-display: 96px;
  --leading-display: 1;
  --tracking-display: -3.84px;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-120: 120px;
  --spacing-140: 140px;
  --spacing-160: 160px;
  --spacing-164: 164px;

  /* Layout */
  --page-max-width: 1440px;
  --section-gap: 68px;
  --card-padding: clamp(24px, 3vw, 48px);
  --element-gap: 20px;

  /* Border Radius */
  --radius-md: 6px;
  --radius-xl: 12px;
  --radius-2xl: 16px;

  /* Named Radii */
  --radius-cards: 16px;
  --radius-small: 6px;
  --radius-buttons: 6px;

  /* Surfaces */
  --surface-ink: #0b1016;
  --surface-deep-ink: #121821;
  --surface-slate: #222a35;
  --surface-hover-slate: #2c3542;
  --surface-cream: #ece8dc;

  /* Layout fluido (agregado para la web) */
  --gutter: clamp(16px, 4vw, 64px);
  --section-pad: clamp(80px, 10vw, 160px);
  --nav-h: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}