/* ═══════════════════════════════════════════════════════════════════════
   URBEMAX · TOKENS SEMÁNTICOS v2.2
   La escala de color vive en base.css (:root). Este archivo solo define
   ROLES. Así no hay dos definiciones del mismo color compitiendo.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* superficies */
  --ub-bg: var(--ub-paper);
  --ub-surface: var(--ub-white);
  --ub-surface-2: var(--ub-purple-50);
  --ub-surface-3: var(--ub-purple-100);
  --ub-inverse: var(--ub-purple-950);

  /* texto */
  --ub-text: var(--ub-ink);
  --ub-text-soft: var(--ub-slate);
  --ub-text-muted: color-mix(in srgb, var(--ub-slate) 72%, var(--ub-white));
  --ub-text-inverse: var(--ub-white);

  /* líneas */
  --ub-border: var(--ub-line);
  --ub-border-strong: color-mix(in srgb, var(--ub-ink) 22%, var(--ub-white));

  /* acción */
  --ub-primary: var(--ub-purple-800);
  --ub-primary-hover: var(--ub-purple-950);
  --ub-primary-soft: var(--ub-purple-100);
  --ub-on-primary: var(--ub-white);
  --ub-accent: var(--ub-orange-700);
  --ub-accent-hover: var(--ub-orange-600);
  --ub-accent-soft: var(--ub-orange-200);
  --ub-accent-bright: var(--ub-orange-500);
  /* Naranja accesible AA sobre fondo claro (5.18:1). Nombre propio para no
     chocar con --ub-orange-700 de base.css. */
  --ub-orange-aa: #c2410c;
  --ub-on-accent: var(--ub-white);

  /* estado */
  --ub-ok: var(--ub-success);
  --ub-danger: #b3261e;
  --ub-focus: var(--ub-orange-600);
  --ub-ring: 0 0 0 3px color-mix(in srgb, var(--ub-orange-600) 42%, transparent);

  /* tipografía */
  --ub-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ub-font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --ub-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ub-fs-xs: .75rem; --ub-fs-sm: .875rem; --ub-fs-base: 1rem; --ub-fs-lg: 1.125rem;
  --ub-fs-xl: clamp(1.25rem, 1.6vw, 1.4rem); --ub-fs-2xl: clamp(1.45rem, 2.4vw, 1.9rem);
  --ub-fs-3xl: clamp(1.8rem, 3.2vw, 2.5rem); --ub-fs-4xl: clamp(2.2rem, 4.4vw, 3.4rem);
  --ub-fs-5xl: clamp(2.4rem, 5vw, 4.2rem);
  --ub-lh-tight: 1.15; --ub-lh-snug: 1.35; --ub-lh-base: 1.62;
  --ub-ls-tight: -.025em; --ub-ls-wide: .12em;

  /* espacio (4px) */
  --ub-space-1: 4px; --ub-space-2: 8px; --ub-space-3: 12px; --ub-space-4: 16px;
  --ub-space-5: 24px; --ub-space-6: 32px; --ub-space-7: 48px; --ub-space-8: 64px; --ub-space-9: 96px;

  /* radios y sombras */
  --ub-radius-sm: 10px; --ub-radius: 16px; --ub-radius-lg: 24px; --ub-radius-pill: 999px;
  --ub-shadow-sm: 0 2px 8px color-mix(in srgb, var(--ub-ink) 8%, transparent);
  --ub-shadow: 0 10px 30px color-mix(in srgb, var(--ub-ink) 10%, transparent);
  --ub-shadow-lg: 0 24px 60px color-mix(in srgb, var(--ub-ink) 18%, transparent);

  --ub-max: 1180px; --ub-read: 72ch;
}

/* AMOLED */
[data-theme="amoled"] {
  --ub-bg: #000; --ub-surface: #0a0a0f; --ub-surface-2: #101018; --ub-surface-3: #17171f;
  --ub-inverse: #0a0a0f;
  --ub-text: #f2f4f8; --ub-text-soft: #a8b3c4; --ub-text-muted: #7c8798;
  --ub-border: #232333; --ub-border-strong: #33334a;
  --ub-primary: var(--ub-purple-500); --ub-primary-hover: var(--ub-purple-600);
  --ub-primary-soft: color-mix(in srgb, var(--ub-purple-500) 18%, transparent);
  --ub-on-primary: #0a0a0f;
  --ub-accent: var(--ub-orange-500); --ub-accent-hover: var(--ub-orange-400);
  --ub-accent-soft: color-mix(in srgb, var(--ub-orange-400) 20%, transparent);
  --ub-on-accent: #2a1500;
  --ub-ok: #5be3a8; --ub-danger: #ff9b9b;
  --ub-ring: 0 0 0 3px color-mix(in srgb, var(--ub-orange-400) 55%, transparent);
}