:root {
  --flip-ink: #071829;
  --flip-action: #2d3bfd;
  --flip-surface: #ebf1f7;
  --flip-decorative: #8b9bb1;
  --flip-cream: #e6e2dc;
  --flip-muted-text: #5b6b7d;
  --flip-dark-accent: #7d86ff;
  --flip-white: #ffffff;

  --flip-font: "Instrument Sans", system-ui, sans-serif;
  --flip-weight-body: 400;
  --flip-weight-medium: 500;
  --flip-weight-display: 600;

  --flip-space-1: 4px;
  --flip-space-2: 8px;
  --flip-space-3: 12px;
  --flip-space-4: 16px;
  --flip-space-5: 24px;
  --flip-space-6: 32px;
  --flip-space-7: 48px;
  --flip-space-8: 64px;
  --flip-space-9: 80px;

  --flip-radius-control: 6px;
  --flip-radius-panel: 12px;
  --flip-radius-pill: 999px;
  --flip-radius-icon: 12px;
  --flip-motion-fast: 120ms;
  --flip-motion-normal: 180ms;

  /* Tipografía de producto (5.1) */
  --flip-font-size-display: 40px; --flip-line-height-display: 40px; --flip-tracking-display: -0.04em;
  --flip-font-size-h1: 32px; --flip-line-height-h1: 34px; --flip-tracking-h1: -0.03em;
  --flip-font-size-h2: 24px; --flip-line-height-h2: 28px; --flip-tracking-h2: -0.02em;
  --flip-font-size-h3: 20px; --flip-line-height-h3: 24px; --flip-tracking-h3: -0.01em;
  --flip-font-size-lead: 18px; --flip-line-height-lead: 28px;
  --flip-font-size-body: 16px; --flip-line-height-body: 24px;
  --flip-font-size-small: 14px; --flip-line-height-small: 20px;
  --flip-font-size-label: 14px; --flip-line-height-label: 20px;
  --flip-font-size-kicker: 12px; --flip-line-height-kicker: 16px; --flip-tracking-kicker: 0.13em;

  /* Controles y foco */
  --flip-target-min: 44px;
  --flip-field-font-size: 16px;
  --flip-focus-width: 2px;
  --flip-focus-offset: 2px;

  /* Roles semánticos — tema claro */
  --flip-bg: #ffffff;
  --flip-surface-role: #ebf1f7;
  --flip-card: #ffffff;
  --flip-text: #071829;
  --flip-text-muted: #5b6b7d;
  --flip-accent: #2d3bfd;
  --flip-line: #cedae6;
  --flip-border-control: #5b6b7d;
  --flip-focus: #2d3bfd;
  --flip-on-action: #ffffff;

  /* Colores funcionales (5.1) — siempre con icono y palabra */
  --flip-success: #0f6b3e; --flip-success-surface: #e7f4ec; --flip-success-border: #3f9a68;
  --flip-warning: #8a4b00; --flip-warning-surface: #fff3dc; --flip-warning-border: #c27a00;
  --flip-error: #b3261e; --flip-error-surface: #fdecea; --flip-error-border: #d9483b;
  --flip-info: #075985; --flip-info-surface: #e6f3fa; --flip-info-border: #2b8ac2;
  --flip-on-status: #ffffff;

  /* Estados interactivos (5.1) */
  --flip-action-hover: #2130c9;
  --flip-action-pressed: #162597;
  --flip-link: #2d3bfd; --flip-link-hover: #2130c9; --flip-link-pressed: #162597;
  --flip-secondary-bg: #ffffff; --flip-secondary-hover: #ebf1f7; --flip-secondary-pressed: #cedae6;
  --flip-disabled-bg: #ebf1f7; --flip-disabled-text: #8b9bb1; --flip-disabled-border: #cedae6;
  --flip-transition-color: 120ms ease-out;
  --flip-transition-layout: 180ms ease-out;
  --flip-icon-stroke: 1.75;
}

/* Roles semánticos — secciones oscuras sobre Azul Profundo */
[data-theme="dark"], .flip-dark {
  --flip-bg: #071829;
  --flip-surface-role: #0c2237;
  --flip-card: #0c2237;
  --flip-text: #ffffff;
  --flip-text-muted: #c2cdd9;
  --flip-accent: #7d86ff;
  --flip-line: #34465a;
  --flip-border-control: #8b9bb1;
  --flip-focus: #7d86ff;
  --flip-on-action: #ffffff;

  --flip-success: #5fd39a; --flip-success-surface: #0d2e24; --flip-success-border: #2f8a5f;
  --flip-warning: #f5b94a; --flip-warning-surface: #33260d; --flip-warning-border: #b07b1c;
  --flip-error: #ff8a80; --flip-error-surface: #3a1618; --flip-error-border: #c9463d;
  --flip-info: #6cc4f0; --flip-info-surface: #0b2c40; --flip-info-border: #2e86b8;
  --flip-on-status: #071829;
  --flip-link: #7d86ff; --flip-link-hover: #8a98ff; --flip-link-pressed: #97aaff;
  --flip-secondary-bg: #071829; --flip-secondary-hover: #0c2237; --flip-secondary-pressed: #34465a;
  --flip-disabled-bg: #0c2237; --flip-disabled-text: #5b6b7d; --flip-disabled-border: #34465a;
}

@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-400.woff2") format("woff2"), url("../fonts/instrument-sans-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-500.woff2") format("woff2"), url("../fonts/instrument-sans-500.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-600.woff2") format("woff2"), url("../fonts/instrument-sans-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-600-italic.woff2") format("woff2"), url("../fonts/instrument-sans-600-italic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }