/* ============================================================
   APPH Design Tokens · Branding Web APPH Extendido v2.0
   Paleta, tipografía, espaciado y elevación oficiales.
   ============================================================ */
:root {
  /* Color · Paleta institucional */
  --apph-blue-400: #36a2df;
  --apph-blue-600: #326eb3;
  --apph-blue-900: #2d388c;
  --apph-orange: #e59418;
  --apph-yellow: #f5cf17;
  --apph-green: #3d8a36;
  --apph-magenta: #a01678;
  --apph-ink: #222f3e;
  --apph-muted: #5e6a75;
  --apph-surface: #ffffff;
  --apph-surface-blue: #eaf5fb;
  --apph-surface-orange: #fef3e5;
  --apph-surface-gray: #f2f4f7;
  --apph-border: #d7dee5;

  /* Tokens semánticos */
  --color-brand-primary: var(--apph-blue-900);
  --color-brand-secondary: var(--apph-blue-600);
  --color-brand-highlight: var(--apph-orange);
  --color-text-primary: var(--apph-ink);
  --color-text-secondary: var(--apph-muted);
  --color-text-on-primary: #ffffff;
  --color-background-page: var(--apph-surface);
  --color-background-subtle: var(--apph-surface-gray);
  --color-background-info: var(--apph-surface-blue);
  --color-border-default: var(--apph-border);
  --color-link: var(--apph-blue-600);
  --color-focus: var(--apph-yellow);

  /* Radio y elevación */
  --apph-radius-sm: 8px;
  --apph-radius-md: 12px;
  --apph-radius-lg: 20px;
  --apph-shadow-card: 0 8px 24px rgb(34 47 62 / 10%);
  --apph-shadow-lg: 0 20px 45px rgb(45 56 140 / 18%);
  --apph-focus-ring: 0 0 0 3px var(--apph-yellow);

  /* Espaciado · múltiplos de 4 */
  --apph-space-1: 4px;
  --apph-space-2: 8px;
  --apph-space-3: 12px;
  --apph-space-4: 16px;
  --apph-space-6: 24px;
  --apph-space-8: 32px;
  --apph-space-12: 48px;
  --apph-space-16: 64px;

  /* Contenido */
  --apph-content-max: 1200px;

  /* Tipografía · escala fluida (Branding sección 6) */
  --font-size-sm: 0.875rem;
  --font-size-body: 1rem;
  --font-size-lead: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
  --font-size-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.375rem);
  --font-size-h2: clamp(1.625rem, 1.35rem + 1vw, 1.875rem);
  --font-size-h1: clamp(2rem, 1.6rem + 1.5vw, 2.5rem);
  --font-size-display: clamp(2.125rem, 1.6rem + 2.2vw, 3rem);
  --font-title: "Montserrat", Arial, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
}