/* ============================================================
   CIFH — Design tokens
   Naranja institucional #EB5D0B + azul marino #111C4E (del logo)
   ============================================================ */
:root {
  /* --- Marca --- */
  --color-brand: #EB5D0B;
  --color-brand-dark: #C74A05;
  --color-brand-light: #FDEBE1;
  --color-navy: #111C4E;
  --color-navy-light: #24316B;

  /* --- Neutrales (estilo Stripe/Notion: grises amplios, poco saturados) --- */
  --color-ink: #14161F;
  --color-body: #40465A;
  --color-muted: #6B7182;
  --color-line: #E6E5EF;
  --color-line-soft: #F0EFF7;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F8F7FC;
  --color-surface-navy: #0D1638;

  /* --- Estado --- */
  --color-success: #17845A;
  --color-focus: #2E6BFF;

  /* --- Tipografia ---
     Manrope = titulares (personalidad de marca)
     Inter   = texto de lectura
     Plex Mono = registro "spec": horas, cifras, eyebrows, breadcrumbs —
     el vocabulario tecnico de una constancia/certificacion */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Manrope', var(--font-sans);
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.375rem;
  --fs-4xl: 3rem;
  --fs-5xl: 3.75rem;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;

  /* --- Espaciado (escala 4px) --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  /* --- Forma --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* --- Sombra --- */
  --shadow-sm: 0 1px 2px rgba(17, 28, 78, 0.06);
  --shadow-md: 0 8px 24px rgba(17, 28, 78, 0.08);
  --shadow-lg: 0 24px 60px rgba(17, 28, 78, 0.14);
  --shadow-brand: 0 12px 28px rgba(235, 93, 11, 0.28);

  /* --- Layout --- */
  --container-max: 1220px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* --- Transiciones --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 480ms;

  /* --- Firma de marca: el corte angular del isotipo CIFH --- */
  --cut: 26px;
  --cut-lg: 44px;
}