:root {
  --vl-night-bg: #000000;
  --vl-night-card: #1c1c1e;
  --vl-night-raised: #2c2c2e;
  --vl-night-line: #3a3a3c;
  --vl-night-muted: #8e8e93;
  --vl-night-secondary: #aeaeb2;
  --vl-night-text: #f5f5f7;

  --vl-n-0: #ffffff;
  --vl-n-50: #f5f5f5;
  --vl-n-100: #ebebeb;
  --vl-n-200: #d6d6d6;
  --vl-n-300: #b8b8b8;
  --vl-n-400: #8f8f8f;
  --vl-n-500: #6b6b6b;
  --vl-n-600: #505050;
  --vl-n-700: #383838;
  --vl-n-800: #242424;
  --vl-n-900: #151515;
  --vl-n-950: #0b0b0b;

  --vl-lima-50: #f8fcef;
  --vl-lima-100: #e5f6bf;
  --vl-lima-200: #cff08a;
  --vl-lima-300: #b6eb52;
  --vl-lima-500: #9bea2f;
  --vl-lima-600: #4fa800;
  --vl-lima-700: #3f7f0a;
  --vl-lima-800: #2d5e07;
  --vl-lima-900: #1f4205;
  --vl-lima-950: #112602;

  --vl-amber-50: #fffaf0;
  --vl-amber-100: #ffebbf;
  --vl-amber-300: #ffd073;
  --vl-amber-500: #ffb224;
  --vl-amber-600: #d98f00;
  --vl-amber-700: #a86b00;
  --vl-amber-800: #744900;
  --vl-amber-900: #4d3100;
  --vl-amber-950: #2a1b00;

  --vl-red-50: #fef3f5;
  --vl-red-100: #f9cdd5;
  --vl-red-300: #f68fa1;
  --vl-red-500: #ff7088;
  --vl-red-600: #e0405f;
  --vl-red-700: #c41e3a;
  --vl-red-800: #a3162f;
  --vl-red-900: #6e0e1f;
  --vl-red-950: #3a0710;

  /* 6. TIPOGRAFIA. Instrument Sans (SIL OFL 1.1). Dos pesos: 500 y 600. */
  --vl-font:
    "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --vl-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --vl-fw-regular: 400;
  --vl-fw-medium: 500;
  --vl-fw-semibold: 600;
  --vl-fs-display: clamp(36px, 7vw, 56px);
  --vl-lh-display: 1.05;
  --vl-ls-display: -0.035em;
  --vl-fs-h1: clamp(28px, 4.5vw, 36px);
  --vl-lh-h1: 1.15;
  --vl-ls-h1: -0.03em;
  --vl-fs-h2: 22px;
  --vl-lh-h2: 1.25;
  --vl-ls-h2: -0.02em;
  --vl-fs-h3: 19px;
  --vl-lh-h3: 1.3;
  --vl-ls-h3: -0.015em;
  --vl-fs-body: 17px;
  --vl-lh-body: 1.5;
  --vl-ls-body: -0.005em;
  --vl-fs-body-sm: 15px;
  --vl-lh-body-sm: 1.45;
  --vl-ls-body-sm: 0;
  --vl-fs-label: 13px;
  --vl-lh-label: 1.3;
  --vl-ls-label: 0.01em;
  --vl-fs-micro: 12px;
  --vl-lh-micro: 1.3;
  --vl-ls-micro: 0.04em;
  --vl-fs-figure: clamp(32px, 8vw, 48px);
  --vl-lh-figure: 1;
  --vl-ls-figure: -0.03em;
  --vl-fs-unit: clamp(16px, 4vw, 24px);

  --vl-s-1: 4px;
  --vl-s-2: 8px;
  --vl-s-3: 12px;
  --vl-s-4: 16px;
  --vl-s-5: 20px;
  --vl-s-6: 24px;
  --vl-s-7: 32px;
  --vl-s-8: 40px;
  --vl-s-9: 48px;
  --vl-s-10: 64px;
  --vl-s-11: 80px;
  --vl-gutter: 16px;
  --vl-page: 1120px;
  --vl-touch: 44px;
  --vl-actionbar-pad-block: var(--vl-s-3);
  --vl-actionbar-btn-min: 52px;
  --vl-actionbar-content-gap: var(--vl-s-6);
  --vl-actionbar-clearance: calc(
    var(--vl-actionbar-pad-block) + var(--vl-actionbar-btn-min) +
      var(--vl-actionbar-pad-block) + 1px + env(safe-area-inset-bottom, 0px)
  );

  --vl-r-1: 6px;
  --vl-r-2: 10px;
  --vl-r-3: 16px;
  --vl-r-4: 24px;
  --vl-r-pill: 999px;
  --vl-r-app: 22.5%;

  --vl-dur-fast: 120ms;
  --vl-dur-base: 180ms;
  --vl-dur-slow: 280ms;
  --vl-ease: cubic-bezier(0.2, 0, 0, 1);
  --vl-focus-ring-w: 2px;
  --vl-focus-ring-off: 2px;

  --vl-viz-stroke: 2.5px;
  --vl-viz-ref-stroke: 2px;
  --vl-viz-bar-r: 2px;
  --vl-ring-w: 7;

  --vl-logo-min-w: 80px;
  --vl-logo-min-icon: 16px;
}

:root,
[data-theme="dark"] {
  --vl-bg: #000000;
  --vl-bg-subtle: #000000;
  --vl-bg-sunken: #000000;
  --vl-surface: #1c1c1e;
  --vl-surface-raised: #2c2c2e;
  --vl-border: #2c2c2e;
  --vl-border-strong: #3a3a3c;
  --vl-border-input: #636366;
  --vl-text: #f5f5f7;
  --vl-text-secondary: #aeaeb2;
  --vl-text-muted: #8e8e93;
  --vl-text-inverse: #0b0b0b;
  --vl-accent: #9bea2f;
  --vl-accent-on: #0b0b0b;
  --vl-accent-text: #9bea2f;
  --vl-dot: #9bea2f;
  --vl-link: #9bea2f;
  --vl-ok-ink: #9bea2f;
  --vl-ok-mark: #9bea2f;
  --vl-ok-field: #1a2a0a;
  --vl-warn-ink: #ffb224;
  --vl-warn-mark: #ffb224;
  --vl-warn-field: #2e2108;
  --vl-error-ink: #ff7088;
  --vl-error-mark: #ff7088;
  --vl-error-field: #34131b;
  --vl-viz-1: #3987e5;
  --vl-viz-2: #d95926;
  --vl-viz-3: #9085e9;
  --vl-viz-context: #3a3a3c;
  --vl-viz-ref: #8e8e93;
  --vl-viz-now: #9bea2f;
  --vl-ring-track: #2c2c2e;
  --vl-focus-ring: #9bea2f;
  --vl-focus-halo: transparent;
  --vl-shadow-1: none;
  --vl-shadow-2: none;
  color-scheme: dark;
}

[data-theme="light"] {
  --vl-bg: #ffffff;
  --vl-bg-subtle: #f5f5f5;
  --vl-bg-sunken: #ebebeb;
  --vl-surface: #ffffff;
  --vl-surface-raised: #ffffff;
  --vl-border: #ebebeb;
  --vl-border-strong: #d6d6d6;
  --vl-border-input: #8f8f8f;
  --vl-text: #0b0b0b;
  --vl-text-secondary: #505050;
  --vl-text-muted: #6b6b6b;
  --vl-text-inverse: #ffffff;
  --vl-accent: #9bea2f;
  --vl-accent-on: #0b0b0b;
  --vl-accent-text: #2d5e07;
  --vl-dot: #4fa800;
  --vl-link: #2d5e07;
  --vl-ok-ink: #2d5e07;
  --vl-ok-mark: #4fa800;
  --vl-ok-field: #f8fcef;
  --vl-warn-ink: #744900;
  --vl-warn-mark: #d98f00;
  --vl-warn-field: #fffaf0;
  --vl-error-ink: #a3162f;
  --vl-error-mark: #e0405f;
  --vl-error-field: #fef3f5;
  --vl-viz-1: #2a78d6;
  --vl-viz-2: #eb6834;
  --vl-viz-3: #4a3aa7;
  --vl-viz-context: #d6d6d6;
  --vl-viz-ref: #6b6b6b;
  --vl-viz-now: #4fa800;
  --vl-ring-track: #ebebeb;
  --vl-focus-ring: #0b0b0b;
  --vl-focus-halo: #9bea2f;
  --vl-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --vl-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.08);
  color-scheme: light;
}

.vl-num {
  font-variant-numeric: tabular-nums;
}
.vl-focus:focus-visible {
  outline: var(--vl-focus-ring-w) solid var(--vl-focus-ring);
  outline-offset: var(--vl-focus-ring-off);
  box-shadow: 0 0 0
    calc(var(--vl-focus-ring-w) + var(--vl-focus-ring-off) + 1px)
    var(--vl-focus-halo);
}

@media (min-width: 720px) {
  :root {
    --vl-gutter: var(--vl-s-6);
  }
}
@media (min-width: 1200px) {
  :root {
    --vl-gutter: var(--vl-s-8);
    --vl-page: 1280px;
  }
}
@media (min-width: 1440px) {
  :root {
    --vl-page: 1360px;
  }
}