/* HTML Cleaner — tokens de diseño v1
 * Modo claro en :root; modo oscuro en [data-theme="dark"].
 * Si no hay data-theme, el sistema operativo decide (prefers-color-scheme).
 * Fuentes autoalojadas: copia /fonts/*.woff2 al servidor y ajusta la ruta.
 */
@font-face { font-family: "Inter"; src: url("../fonts/Inter-Variable-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Variable-latin.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Variable-latin-italic.woff2") format("woff2"); font-weight: 100 800; font-style: italic; font-display: swap; }

:root {
  color-scheme: light;
  /* Color — marca y semánticos */
  --color-bg: #f6f8f7;
  --color-surface: #ffffff;
  --color-surface-sunken: #edf1f0;
  --color-surface-hover: #e4eae8;
  --color-border: #c2cdca;
  --color-border-strong: #7e8e8a;
  --color-text: #17211f;
  --color-text-muted: #53635f;
  --color-text-disabled: #8a9894;
  --color-primary: #0b6157;
  --color-primary-hover: #0c4b44;
  --color-primary-active: #0b3833;
  --color-on-primary: #ffffff;
  --color-primary-subtle: #edf7f5;
  --color-on-primary-subtle: #0b6157;
  --color-accent: #0e8a6c;
  --color-on-accent: #ffffff;
  --color-focus: #0b6157;
  --color-logo-chevron: #0b6157;
  --color-logo-check: #17a884;
  --color-logo-text: #17211f;
  --color-success: #17703a;
  --color-success-subtle: #e7f5ec;
  --color-success-border: #5faf7e;
  --color-warning: #8a5300;
  --color-warning-subtle: #fdf3dc;
  --color-warning-border: #d9a43a;
  --color-error: #b42318;
  --color-error-subtle: #fdecea;
  --color-error-border: #d0574b;
  --color-danger: #b42318;
  --color-danger-hover: #912018;
  --color-on-danger: #ffffff;
  --color-info: #1d5fa8;
  --color-info-subtle: #e8f0fb;
  --color-info-border: #7fa8db;
  --color-editor-bg: #ffffff;
  --color-editor-gutter: #f2f5f4;
  --color-editor-line-number: #5f6f6b;
  --color-editor-line-number-active: #17211f;
  --color-editor-active-line: #eff6f4;
  --color-editor-selection: #c9e8e0;
  --color-editor-cursor: #0b6157;
  --color-editor-match: #fbe7a5;
  --color-editor-match-current: #f2c14e;
  --color-syntax-tag: #a12d57;
  --color-syntax-bracket: #5f6f6b;
  --color-syntax-attr: #7a4a00;
  --color-syntax-value: #17703a;
  --color-syntax-comment: #5f6f6b;
  --color-syntax-entity: #6a3fc4;
  --color-syntax-text: #17211f;
  /* Color — escalas */
  --color-primary-50: #edf7f5;
  --color-primary-100: #d3ece7;
  --color-primary-200: #a6d9cf;
  --color-primary-300: #6fc0b0;
  --color-primary-400: #3aa08e;
  --color-primary-500: #158372;
  --color-primary-600: #0b6e61;
  --color-primary-700: #0b6157;
  --color-primary-800: #0c4b44;
  --color-primary-900: #0b3833;
  --color-primary-950: #062320;
  --color-accent-50: #e9fbf5;
  --color-accent-100: #c6f4e4;
  --color-accent-200: #8df0d4;
  --color-accent-300: #5fd3b8;
  --color-accent-400: #2ec29c;
  --color-accent-500: #17a884;
  --color-accent-600: #0e8a6c;
  --color-accent-700: #0b6f58;
  --color-accent-800: #0a5746;
  --color-accent-900: #08463a;
  --color-accent-950: #042a23;
  --color-neutral-50: #f6f8f7;
  --color-neutral-100: #edf1f0;
  --color-neutral-200: #dce3e1;
  --color-neutral-300: #c2cdca;
  --color-neutral-400: #96a5a1;
  --color-neutral-500: #6e7f7b;
  --color-neutral-600: #53635f;
  --color-neutral-700: #3e4c49;
  --color-neutral-800: #2a3532;
  --color-neutral-900: #17211f;
  --color-neutral-950: #0e1514;
  /* Tipografía */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-size-display: 40px;
  --font-line-height-display: 48px;
  --font-weight-display: 700;
  --font-size-h1: 28px;
  --font-line-height-h1: 36px;
  --font-weight-h1: 700;
  --font-size-h2: 22px;
  --font-line-height-h2: 30px;
  --font-weight-h2: 600;
  --font-size-h3: 18px;
  --font-line-height-h3: 26px;
  --font-weight-h3: 600;
  --font-size-body-lg: 18px;
  --font-line-height-body-lg: 28px;
  --font-weight-body-lg: 400;
  --font-size-body: 16px;
  --font-line-height-body: 24px;
  --font-weight-body: 400;
  --font-size-body-sm: 14px;
  --font-line-height-body-sm: 20px;
  --font-weight-body-sm: 400;
  --font-size-caption: 12px;
  --font-line-height-caption: 16px;
  --font-weight-caption: 500;
  --font-size-label: 14px;
  --font-line-height-label: 20px;
  --font-weight-label: 600;
  --font-size-button: 15px;
  --font-line-height-button: 20px;
  --font-weight-button: 600;
  --font-size-code: 14px;
  --font-line-height-code: 22px;
  --font-weight-code: 400;
  --font-size-code-sm: 13px;
  --font-line-height-code-sm: 20px;
  --font-weight-code-sm: 400;
  /* Espaciado */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  /* Radios */
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  /* Bordes */
  --border-width-1: 1px;
  --border-width-2: 2px;
  --focus-ring-offset: 2px;
  /* Sombras */
  --shadow-1: 0 1px 2px rgba(14, 21, 20, 0.08);
  --shadow-2: 0 2px 4px rgba(14, 21, 20, 0.06), 0 6px 16px rgba(14, 21, 20, 0.10);
  --shadow-3: 0 8px 24px rgba(14, 21, 20, 0.14), 0 2px 6px rgba(14, 21, 20, 0.08);
  /* Tamaños */
  --size-touch-min: 44px;
  --size-control-sm: 36px;
  --size-control-md: 44px;
  --size-control-lg: 52px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;
  --size-sidebar: 320px;
  /* Movimiento */
  --motion-duration-instant: 0ms;
  --motion-duration-fast: 120ms;
  --motion-duration-base: 200ms;
  --motion-duration-slow: 300ms;
  --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-enter: cubic-bezier(0, 0, 0, 1);
  --motion-ease-exit: cubic-bezier(0.3, 0, 1, 1);
  /* Capas */
  --z-sticky: 10;
  --z-sheet: 30;
  --z-dialog: 40;
  --z-toast: 50;
}

[data-theme="dark"] {
  color-scheme: dark;
  /* Color */
  --color-bg: #0e1514;
  --color-surface: #151e1c;
  --color-surface-sunken: #0a100f;
  --color-surface-hover: #1e2a27;
  --color-border: #34413e;
  --color-border-strong: #71817d;
  --color-text: #e6eeec;
  --color-text-muted: #a3b2ae;
  --color-text-disabled: #5e6d69;
  --color-primary: #5fd3b8;
  --color-primary-hover: #8df0d4;
  --color-primary-active: #c6f4e4;
  --color-on-primary: #062320;
  --color-primary-subtle: #0f2e29;
  --color-on-primary-subtle: #8df0d4;
  --color-accent: #2ec29c;
  --color-on-accent: #042a23;
  --color-focus: #8df0d4;
  --color-logo-chevron: #5fd3b8;
  --color-logo-check: #8df0d4;
  --color-logo-text: #e6eeec;
  --color-success: #6fd394;
  --color-success-subtle: #0f2a1b;
  --color-success-border: #2f7a4d;
  --color-warning: #f2c14e;
  --color-warning-subtle: #2e2208;
  --color-warning-border: #8a6a1a;
  --color-error: #ff9c92;
  --color-error-subtle: #3a1411;
  --color-error-border: #e0675b;
  --color-danger: #ff9c92;
  --color-danger-hover: #ffc2bb;
  --color-on-danger: #3a0a06;
  --color-info: #86b8f2;
  --color-info-subtle: #0f2238;
  --color-info-border: #2e5a8c;
  --color-editor-bg: #111a19;
  --color-editor-gutter: #0c1312;
  --color-editor-line-number: #7e8e8a;
  --color-editor-line-number-active: #e6eeec;
  --color-editor-active-line: #172322;
  --color-editor-selection: #1f4a42;
  --color-editor-cursor: #5fd3b8;
  --color-editor-match: #4a3b0e;
  --color-editor-match-current: #735710;
  --color-syntax-tag: #ff94b8;
  --color-syntax-bracket: #8fa09c;
  --color-syntax-attr: #f2c46b;
  --color-syntax-value: #8edb9c;
  --color-syntax-comment: #8c9c98;
  --color-syntax-entity: #c4b1ff;
  --color-syntax-text: #e6eeec;
  /* Sombras */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.40), 0 6px 16px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.40);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* Color */
    --color-bg: #0e1514;
    --color-surface: #151e1c;
    --color-surface-sunken: #0a100f;
    --color-surface-hover: #1e2a27;
    --color-border: #34413e;
    --color-border-strong: #71817d;
    --color-text: #e6eeec;
    --color-text-muted: #a3b2ae;
    --color-text-disabled: #5e6d69;
    --color-primary: #5fd3b8;
    --color-primary-hover: #8df0d4;
    --color-primary-active: #c6f4e4;
    --color-on-primary: #062320;
    --color-primary-subtle: #0f2e29;
    --color-on-primary-subtle: #8df0d4;
    --color-accent: #2ec29c;
    --color-on-accent: #042a23;
    --color-focus: #8df0d4;
    --color-logo-chevron: #5fd3b8;
    --color-logo-check: #8df0d4;
    --color-logo-text: #e6eeec;
    --color-success: #6fd394;
    --color-success-subtle: #0f2a1b;
    --color-success-border: #2f7a4d;
    --color-warning: #f2c14e;
    --color-warning-subtle: #2e2208;
    --color-warning-border: #8a6a1a;
    --color-error: #ff9c92;
    --color-error-subtle: #3a1411;
    --color-error-border: #e0675b;
    --color-danger: #ff9c92;
    --color-danger-hover: #ffc2bb;
    --color-on-danger: #3a0a06;
    --color-info: #86b8f2;
    --color-info-subtle: #0f2238;
    --color-info-border: #2e5a8c;
    --color-editor-bg: #111a19;
    --color-editor-gutter: #0c1312;
    --color-editor-line-number: #7e8e8a;
    --color-editor-line-number-active: #e6eeec;
    --color-editor-active-line: #172322;
    --color-editor-selection: #1f4a42;
    --color-editor-cursor: #5fd3b8;
    --color-editor-match: #4a3b0e;
    --color-editor-match-current: #735710;
    --color-syntax-tag: #ff94b8;
    --color-syntax-bracket: #8fa09c;
    --color-syntax-attr: #f2c46b;
    --color-syntax-value: #8edb9c;
    --color-syntax-comment: #8c9c98;
    --color-syntax-entity: #c4b1ff;
    --color-syntax-text: #e6eeec;
    /* Sombras */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.40), 0 6px 16px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.40);
  }
}

/* Puntos de corte (no se pueden usar var() en @media):
 *   móvil  ≥ 360px  · tableta ≥ 768px · escritorio ≥ 1280px */

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-base: 0ms;
    --motion-duration-slow: 0ms;
  }
}