:root {
  color-scheme: light dark;

  --font-display: "Plus Jakarta Sans", "Aptos Display", "Segoe UI", Arial, sans-serif;
  --font-body: "Rubik", Aptos, "Segoe UI", Arial, sans-serif;
  --font-code: "Google Sans Code", "Cascadia Code", Consolas, monospace;

  --ink-900-brand: #060606;
  --ink-800-brand: #080808;
  --ink-700-brand: #0b0b0b;
  --ink-600-brand: #0e0e0e;
  --ink-500-brand: #0f0f0f;
  --ink-400-brand: #272727;
  --ink-300-brand: #3f3f3f;
  --ink-200-brand: #575757;
  --ink-100-brand: #6f6f6f;

  --pos-900: #0c341d;
  --pos-800: #145730;
  --pos-700: #1b7a43;
  --pos-600: #239d56;
  --pos-500: #27ae60;
  --pos-400: #3db670;
  --pos-300: #68c690;
  --pos-200: #93d7b0;
  --pos-100: #bee7cf;

  --pre-900: #1a003c;
  --pre-800: #2c0065;
  --pre-700: #3e008d;
  --pre-600: #4f00b5;
  --pre-500: #5800c9;
  --pre-400: #691ace;
  --pre-300: #8a4dd9;
  --pre-200: #ac80e4;
  --pre-100: #cdb3ef;

  --tre-900: #341139;
  --tre-800: #571c60;
  --tre-700: #7a2786;
  --tre-600: #9d32ac;
  --tre-500: #ae38bf;
  --tre-400: #b64cc5;
  --tre-300: #c674d2;
  --tre-200: #d79cdf;
  --tre-100: #e7c3ec;

  --ua-900: #493c17;
  --ua-800: #796526;
  --ua-700: #a98d35;
  --ua-600: #dab544;
  --ua-500: #f2c94c;
  --ua-400: #f3ce5e;
  --ua-300: #f6d982;
  --ua-200: #f9e4a6;
  --ua-100: #fbefc9;

  --ext-900: #0a1931;
  --ext-800: #112b52;
  --ext-700: #173b72;
  --ext-600: #1e4d93;
  --ext-500: #2155a3;
  --ext-400: #3766ac;
  --ext-300: #6488bf;
  --ext-200: #90aad1;
  --ext-100: #bccce3;

  --rose-900: #46091e;
  --rose-800: #750f32;
  --rose-700: #a31545;
  --rose-600: #d21b59;
  --rose-500: #e91e63;
  --rose-400: #eb3573;
  --rose-300: #f06292;
  --rose-200: #f48fb1;
  --rose-100: #f8bcd0;

  --orange-900: #492e16;
  --orange-800: #794d25;
  --orange-700: #a96b34;
  --orange-600: #da8a43;
  --orange-500: #f2994a;
  --orange-400: #f3a35c;
  --orange-300: #f6b880;
  --orange-200: #f9cca5;
  --orange-100: #fbe0c9;

  --slate-900: #141414;
  --slate-800: #171717;
  --slate-700: #1a1a1a;
  --slate-600: #1e1e1e;
  --slate-500: #212121;
  --slate-400: #373737;
  --slate-300: #4d4d4d;
  --slate-200: #646464;
  --slate-100: #7a7a7a;
  --ua-white-00: #f5f5f5;

  --ui-display: var(--font-display);
  --ui-body: var(--font-body);
  --ui-code: var(--font-code);
  --ui-canvas: #f3f2f4;
  --ui-bg: var(--ui-canvas);
  --ui-surface-1: #ffffff;
  --ui-surface: var(--ui-surface-1);
  --ui-surface-2: #ebe9ed;
  --ui-surface-3: #e3e0e6;
  --ui-text: #101013;
  --ui-muted: #65626b;
  --ui-muted-2: #6b6771;
  --ui-border: rgb(15 15 15 / 12%);
  --ui-border-strong: rgb(15 15 15 / 22%);
  --ui-accent: var(--ext-500);
  --ui-accent-strong: var(--ext-700);
  --ui-accent-soft: var(--ext-100);
  --ui-on-accent: #ffffff;
  --ui-danger: #b6174d;
  --ui-success: #1b7a43;
  --ui-warning: #a96916;
  --ui-focus: var(--ext-500);
  --ui-shadow-soft: 0 8px 24px rgb(17 11 25 / 4%);
  --ui-shadow-card: 0 24px 70px rgb(18 11 27 / 9%);
  --ui-shadow-sticky: 0 14px 45px rgb(0 0 0 / 10%);
  --ui-shadow-float: 0 24px 70px rgb(0 0 0 / 20%);
  --ui-shadow-modal: 0 28px 90px rgb(0 0 0 / 34%);
  --ui-sticky-surface: rgb(243 242 244 / 90%);
  --ui-sticky-blur: 18px;

  --ui-radius-control: 12px;
  --ui-radius-panel: 20px;
  --ui-control: 44px;
  --ui-type-body: 1rem;
  --ui-action-text: 0.8rem;
  --ui-table-text: 0.8rem;
  --ui-feedback-text: 0.9rem;
  --ui-type-help: 0.875rem;
  --ui-type-footnote: 0.75rem;
  --ui-type-h1: clamp(2rem, 4vw, 4.2rem);
  --ui-type-h2: clamp(1.45rem, 2.4vw, 2.45rem);
  --ui-type-h3: clamp(1.15rem, 1.4vw, 1.35rem);
  --ui-type-h4: 1rem;
  --ui-type-h5: 0.9rem;
  --ui-type-h6: 0.8rem;
  --ui-speed: 180ms;
  --ui-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Alias para consumidores institucionales que aun usan nombres sin prefijo. */
  --canvas: var(--ui-canvas);
  --surface-1: var(--ui-surface-1);
  --surface-2: var(--ui-surface-2);
  --surface-3: var(--ui-surface-3);
  --muted-2: var(--ui-muted-2);
  --line-strong: var(--ui-border-strong);
  --shadow-soft: var(--ui-shadow-soft);
  --shadow-card: var(--ui-shadow-card);
  --shadow-sticky: var(--ui-shadow-sticky);
  --shadow-float: var(--ui-shadow-float);
  --shadow-modal: var(--ui-shadow-modal);
  --sticky-surface: var(--ui-sticky-surface);
  --sticky-blur: var(--ui-sticky-blur);
}

[data-theme="dark"] {
  color-scheme: dark;
  --ui-canvas: #09090b;
  --ui-bg: var(--ui-canvas);
  --ui-surface-1: #141417;
  --ui-surface: var(--ui-surface-1);
  --ui-surface-2: #1b1b20;
  --ui-surface-3: #24242a;
  --ui-text: #f5f4f7;
  --ui-muted: #aaa7b0;
  --ui-muted-2: #918e98;
  --ui-border: rgb(255 255 255 / 10.5%);
  --ui-border-strong: rgb(255 255 255 / 20%);
  --ui-accent: var(--ext-400);
  --ui-accent-strong: var(--ext-200);
  --ui-accent-soft: #14233a;
  --ui-danger: var(--rose-300);
  --ui-success: var(--pos-300);
  --ui-warning: var(--orange-400);
  --ui-focus: var(--ext-200);
  --ui-shadow-soft: 0 8px 24px rgb(0 0 0 / 16%);
  --ui-shadow-card: 0 24px 80px rgb(0 0 0 / 34%);
  --ui-shadow-sticky: 0 14px 45px rgb(0 0 0 / 30%);
  --ui-shadow-float: 0 24px 70px rgb(0 0 0 / 45%);
  --ui-shadow-modal: 0 28px 90px rgb(0 0 0 / 56%);
  --ui-sticky-surface: rgb(9 9 11 / 90%);
}

[data-accent="pre"] {
  --ui-accent: var(--pre-500);
  --ui-accent-strong: var(--pre-700);
  --ui-accent-soft: var(--pre-100);
}

[data-accent="pos"] {
  --ui-accent: var(--pos-500);
  --ui-accent-strong: var(--pos-700);
  --ui-accent-soft: var(--pos-100);
}

[data-accent="tre"] {
  --ui-accent: var(--tre-500);
  --ui-accent-strong: var(--tre-700);
  --ui-accent-soft: var(--tre-100);
}

[data-accent="ua"] {
  --ui-accent: var(--ua-500);
  --ui-accent-strong: var(--ua-900);
  --ui-accent-soft: var(--ua-100);
  --ui-on-accent: var(--ink-900-brand);
}

[data-theme="dark"][data-accent="pre"] {
  --ui-accent: var(--pre-300);
  --ui-accent-strong: var(--pre-200);
  --ui-accent-soft: #2c1647;
}

[data-theme="dark"][data-accent="pos"] {
  --ui-accent: var(--pos-300);
  --ui-accent-strong: var(--pos-200);
  --ui-accent-soft: #123322;
}

[data-theme="dark"][data-accent="tre"] {
  --ui-accent: var(--tre-300);
  --ui-accent-strong: var(--tre-200);
  --ui-accent-soft: #38143e;
}

[data-theme="dark"][data-accent="ua"] {
  --ui-accent: var(--ua-300);
  --ui-accent-strong: var(--ua-200);
  --ui-accent-soft: #3b3217;
  --ui-on-accent: var(--ink-900-brand);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}