/* apple-tokens.css — generado por scripts/sync-hig.mjs. NO EDITAR A MANO.
 *
 * Colores y escala tipográfica leídos de las Human Interface Guidelines de Apple
 * (developer.apple.com/design/human-interface-guidelines) el 2026-09-09.
 * Para refrescar:  node scripts/sync-hig.mjs
 * Para auditar:    node scripts/sync-hig.mjs --check
 *
 * Los colores semánticos (label/bg/separator/fill) NO salen de la tabla del HIG —
 * son los valores de UIKit y viven a mano en el generador, marcados abajo.
 *
 * Tipografía: nunca sirvas SF Pro como webfont. La licencia de Apple la limita a apps
 * de sus plataformas. El stack de abajo usa la fuente ya instalada en el sistema.
 */

:root {
  color-scheme: light dark;

  /* ── Fuentes ───────────────────────────────────────────────────────────── */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
                 "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, monospace;
  --font-rounded: ui-rounded, "SF Pro Rounded", var(--font-system);

  /* ── Escala tipográfica — iOS/iPadOS, Dynamic Type "Large (default)" ────── */
  /* Los tamaños van en rem a propósito: en px el texto deja de escalar. */
  --text-large-title: 2.125rem;
  --leading-large-title: 1.206;
  --weight-large-title: 400;
  --text-title-1: 1.75rem;
  --leading-title-1: 1.214;
  --weight-title-1: 400;
  --text-title-2: 1.375rem;
  --leading-title-2: 1.273;
  --weight-title-2: 400;
  --text-title-3: 1.25rem;
  --leading-title-3: 1.250;
  --weight-title-3: 400;
  --text-headline: 1.0625rem;
  --leading-headline: 1.294;
  --weight-headline: 600;
  --text-body: 1.0625rem;
  --leading-body: 1.294;
  --weight-body: 400;
  --text-callout: 1rem;
  --leading-callout: 1.313;
  --weight-callout: 400;
  --text-subhead: 0.9375rem;
  --leading-subhead: 1.333;
  --weight-subhead: 400;
  --text-footnote: 0.8125rem;
  --leading-footnote: 1.385;
  --weight-footnote: 400;
  --text-caption-1: 0.75rem;
  --leading-caption-1: 1.333;
  --weight-caption-1: 400;
  --text-caption-2: 0.6875rem;
  --leading-caption-2: 1.182;
  --weight-caption-2: 400;

  /* Peso enfatizado de cada estilo (el "Emphasized weight" del HIG) */
  --weight-large-title-emphasized: 700;
  --weight-title-1-emphasized: 700;
  --weight-title-2-emphasized: 700;
  --weight-title-3-emphasized: 600;
  --weight-headline-emphasized: 600;
  --weight-body-emphasized: 600;
  --weight-callout-emphasized: 600;
  --weight-subhead-emphasized: 600;
  --weight-footnote-emphasized: 600;
  --weight-caption-1-emphasized: 600;
  --weight-caption-2-emphasized: 600;

  /* SF Pro Display arranca en 20pt; por debajo, SF Pro Text. */
  --font-display-threshold: 1.25rem;

  /* ── Colores del sistema (claro) ────────────────────────────────────────── */
  --system-red: #FF383C;
  --system-orange: #FF8D28;
  --system-yellow: #FFCC00;
  --system-green: #34C759;
  --system-mint: #00C8B3;
  --system-teal: #00C3D0;
  --system-cyan: #00C0E8;
  --system-blue: #0088FF;
  --system-indigo: #6155F5;
  --system-purple: #CB30E0;
  --system-pink: #FF2D55;
  --system-brown: #AC7F5E;
  --system-gray: #8E8E93;
  --system-gray-2: #AEAEB2;
  --system-gray-3: #C7C7CC;
  --system-gray-4: #D1D1D6;
  --system-gray-5: #E5E5EA;
  --system-gray-6: #F2F2F7;

  /* ── Variantes de contraste aumentado, con nombre propio ─────────────────── */
  --system-red-accessible: #E9152D;
  --system-orange-accessible: #C55300;
  --system-yellow-accessible: #A16A00;
  --system-green-accessible: #008932;
  --system-mint-accessible: #008575;
  --system-teal-accessible: #008198;
  --system-cyan-accessible: #007EAE;
  --system-blue-accessible: #1E6EF4;
  --system-indigo-accessible: #564ADE;
  --system-purple-accessible: #B02FC2;
  --system-pink-accessible: #E7124D;
  --system-brown-accessible: #956D51;
  --system-gray-accessible: #6C6C70;
  --system-gray-2-accessible: #8E8E93;
  --system-gray-3-accessible: #AEAEB2;
  --system-gray-4-accessible: #BCBCC0;
  --system-gray-5-accessible: #D8D8DC;
  --system-gray-6-accessible: #EBEBF0;

  /* ── Colores semánticos (UIKit, no HIG) — claro ─────────────────────────── */
  --label: #000000;
  --label-secondary: rgba(60, 60, 67, 0.60);
  --label-tertiary: rgba(60, 60, 67, 0.30);
  --label-quaternary: rgba(60, 60, 67, 0.18);
  --bg: #FFFFFF;
  --bg-secondary: #F2F2F7;
  --bg-tertiary: #FFFFFF;
  --bg-grouped: #F2F2F7;
  --bg-grouped-secondary: #FFFFFF;
  --bg-grouped-tertiary: #F2F2F7;
  --separator: rgba(60, 60, 67, 0.29);
  --separator-opaque: #C6C6C8;
  --fill: rgba(120, 120, 128, 0.20);
  --fill-secondary: rgba(120, 120, 128, 0.16);
  --fill-tertiary: rgba(118, 118, 128, 0.12);
  --fill-quaternary: rgba(116, 116, 128, 0.08);

  /* ── Rejilla de 8pt ─────────────────────────────────────────────────────── */
  --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;

  /* ── Radios. Regla concéntrica: radio_interno + padding = radio_externo ─── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-capsule: 9999px;
  --radius-alert: 14px;

  /* ── Objetivo táctil mínimo ─────────────────────────────────────────────── */
  --hit-target: 44px;        /* iOS, iPadOS, macOS con puntero grueso */
  --hit-target-spatial: 60px; /* visionOS */

  /* ── Movimiento ─────────────────────────────────────────────────────────── */
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in: cubic-bezier(0.42, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}

/* ── Oscuro por preferencia del sistema ───────────────────────────────────────
 * El :not([data-theme="light"]) deja que un tema explícito gane sobre el sistema.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --system-red: #FF4245;
    --system-orange: #FF9230;
    --system-yellow: #FFD600;
    --system-green: #30D158;
    --system-mint: #00DAC3;
    --system-teal: #00D2E0;
    --system-cyan: #3CD3FE;
    --system-blue: #0091FF;
    --system-indigo: #6D7CFF;
    --system-purple: #DB34F2;
    --system-pink: #FF375F;
    --system-brown: #B78A66;
    --system-gray: #8E8E93;
    --system-gray-2: #636366;
    --system-gray-3: #48484A;
    --system-gray-4: #3A3A3C;
    --system-gray-5: #2C2C2E;
    --system-gray-6: #1C1C1E;

    --system-red-accessible: #FF6165;
    --system-orange-accessible: #FFA056;
    --system-yellow-accessible: #FEDF43;
    --system-green-accessible: #4AD968;
    --system-mint-accessible: #54DFCB;
    --system-teal-accessible: #3BDDEC;
    --system-cyan-accessible: #6DD9FF;
    --system-blue-accessible: #5CB8FF;
    --system-indigo-accessible: #A7AAFF;
    --system-purple-accessible: #EA8DFF;
    --system-pink-accessible: #FF8AC4;
    --system-brown-accessible: #DBA679;
    --system-gray-accessible: #AEAEB2;
    --system-gray-2-accessible: #7C7C80;
    --system-gray-3-accessible: #545456;
    --system-gray-4-accessible: #444446;
    --system-gray-5-accessible: #363638;
    --system-gray-6-accessible: #242426;

    --label: #FFFFFF;
    --label-secondary: rgba(235, 235, 245, 0.60);
    --label-tertiary: rgba(235, 235, 245, 0.30);
    --label-quaternary: rgba(235, 235, 245, 0.16);
    --bg: #000000;
    --bg-secondary: #1C1C1E;
    --bg-tertiary: #2C2C2E;
    --bg-grouped: #000000;
    --bg-grouped-secondary: #1C1C1E;
    --bg-grouped-tertiary: #2C2C2E;
    --separator: rgba(84, 84, 88, 0.60);
    --separator-opaque: #38383A;
    --fill: rgba(120, 120, 128, 0.36);
    --fill-secondary: rgba(120, 120, 128, 0.32);
    --fill-tertiary: rgba(118, 118, 128, 0.24);
    --fill-quaternary: rgba(116, 116, 128, 0.18);
  }
}

/* ── Oscuro por elección explícita ──────────────────────────────────────────── */
:root[data-theme="dark"] {
  --system-red: #FF4245;
  --system-orange: #FF9230;
  --system-yellow: #FFD600;
  --system-green: #30D158;
  --system-mint: #00DAC3;
  --system-teal: #00D2E0;
  --system-cyan: #3CD3FE;
  --system-blue: #0091FF;
  --system-indigo: #6D7CFF;
  --system-purple: #DB34F2;
  --system-pink: #FF375F;
  --system-brown: #B78A66;
  --system-gray: #8E8E93;
  --system-gray-2: #636366;
  --system-gray-3: #48484A;
  --system-gray-4: #3A3A3C;
  --system-gray-5: #2C2C2E;
  --system-gray-6: #1C1C1E;

  --system-red-accessible: #FF6165;
  --system-orange-accessible: #FFA056;
  --system-yellow-accessible: #FEDF43;
  --system-green-accessible: #4AD968;
  --system-mint-accessible: #54DFCB;
  --system-teal-accessible: #3BDDEC;
  --system-cyan-accessible: #6DD9FF;
  --system-blue-accessible: #5CB8FF;
  --system-indigo-accessible: #A7AAFF;
  --system-purple-accessible: #EA8DFF;
  --system-pink-accessible: #FF8AC4;
  --system-brown-accessible: #DBA679;
  --system-gray-accessible: #AEAEB2;
  --system-gray-2-accessible: #7C7C80;
  --system-gray-3-accessible: #545456;
  --system-gray-4-accessible: #444446;
  --system-gray-5-accessible: #363638;
  --system-gray-6-accessible: #242426;

  --label: #FFFFFF;
  --label-secondary: rgba(235, 235, 245, 0.60);
  --label-tertiary: rgba(235, 235, 245, 0.30);
  --label-quaternary: rgba(235, 235, 245, 0.16);
  --bg: #000000;
  --bg-secondary: #1C1C1E;
  --bg-tertiary: #2C2C2E;
  --bg-grouped: #000000;
  --bg-grouped-secondary: #1C1C1E;
  --bg-grouped-tertiary: #2C2C2E;
  --separator: rgba(84, 84, 88, 0.60);
  --separator-opaque: #38383A;
  --fill: rgba(120, 120, 128, 0.36);
  --fill-secondary: rgba(120, 120, 128, 0.32);
  --fill-tertiary: rgba(118, 118, 128, 0.24);
  --fill-quaternary: rgba(116, 116, 128, 0.18);
}

/* ── Contraste aumentado ──────────────────────────────────────────────────────
 * Apple publica una variante de cada color para "Increase Contrast". Ni la skill
 * de la que partimos ni el espejo del HIG las traían.
 */
@media (prefers-contrast: more) {
  :root:not([data-theme="dark"]) {
    --system-red: #E9152D;
    --system-orange: #C55300;
    --system-yellow: #A16A00;
    --system-green: #008932;
    --system-mint: #008575;
    --system-teal: #008198;
    --system-cyan: #007EAE;
    --system-blue: #1E6EF4;
    --system-indigo: #564ADE;
    --system-purple: #B02FC2;
    --system-pink: #E7124D;
    --system-brown: #956D51;
    --system-gray: #6C6C70;
    --system-gray-2: #8E8E93;
    --system-gray-3: #AEAEB2;
    --system-gray-4: #BCBCC0;
    --system-gray-5: #D8D8DC;
    --system-gray-6: #EBEBF0;
    --label-secondary: rgba(60, 60, 67, 0.80);
    --label-tertiary: rgba(60, 60, 67, 0.50);
    --separator: rgba(60, 60, 67, 0.50);
  }
}

@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --system-red: #FF6165;
    --system-orange: #FFA056;
    --system-yellow: #FEDF43;
    --system-green: #4AD968;
    --system-mint: #54DFCB;
    --system-teal: #3BDDEC;
    --system-cyan: #6DD9FF;
    --system-blue: #5CB8FF;
    --system-indigo: #A7AAFF;
    --system-purple: #EA8DFF;
    --system-pink: #FF8AC4;
    --system-brown: #DBA679;
    --system-gray: #AEAEB2;
    --system-gray-2: #7C7C80;
    --system-gray-3: #545456;
    --system-gray-4: #444446;
    --system-gray-5: #363638;
    --system-gray-6: #242426;
    --label-secondary: rgba(235, 235, 245, 0.80);
    --label-tertiary: rgba(235, 235, 245, 0.50);
    --separator: rgba(84, 84, 88, 0.85);
  }
}

@media (prefers-contrast: more) {
  :root[data-theme="dark"] {
    --system-red: #FF6165;
    --system-orange: #FFA056;
    --system-yellow: #FEDF43;
    --system-green: #4AD968;
    --system-mint: #54DFCB;
    --system-teal: #3BDDEC;
    --system-cyan: #6DD9FF;
    --system-blue: #5CB8FF;
    --system-indigo: #A7AAFF;
    --system-purple: #EA8DFF;
    --system-pink: #FF8AC4;
    --system-brown: #DBA679;
    --system-gray: #AEAEB2;
    --system-gray-2: #7C7C80;
    --system-gray-3: #545456;
    --system-gray-4: #444446;
    --system-gray-5: #363638;
    --system-gray-6: #242426;
    --label-secondary: rgba(235, 235, 245, 0.80);
    --label-tertiary: rgba(235, 235, 245, 0.50);
    --separator: rgba(84, 84, 88, 0.85);
  }
}

/* ── Movimiento reducido ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0.01ms;
    --duration-fast: 0.01ms;
    --duration-normal: 0.01ms;
    --duration-slow: 0.01ms;
  }
}