/* ============================================================================================
   opfar-tokens.css — TOKENS OFICIALES DEL SISTEMA DE DISEÑO DE OPFAR, COPIADOS TAL CUAL
   Origen: _PROYECTOS/_MANUAL DE MARCA/OPFAR Design System/tokens/
           colors.css + typography.css + spacing.css (Manual de marca OPFAR v2.0)
   Copiados el 24/09/2026 (UNIFICACION, D-19). NO SE EDITAN AQUÍ: si cambian, se vuelven a copiar.
   fonts.css no se copia: importa de Google Fonts, y el formulario ya trae Sora, Space Grotesk
   y Space Mono en assets/ (@font-face de styles.css), así que funciona sin conexión a Google.
   ============================================================================================ */

/* ---------- colors.css ---------- */
/* OPFAR — Paleta de color
   Source: Manual de marca OPFAR v2.0 · sección 06 */

:root {
  /* ---- Base brand palette (raw values) ---- */
  --opfar-turquesa:        #0FA3B4; /* Color primario · marca */
  --opfar-verde-profundo:  #123B44; /* Texto · fondos oscuros */
  --opfar-acero:           #9AA7AA; /* Aro y cruz metálica */
  --opfar-turquesa-claro:  #5BD0D6; /* Turquesa claro */
  --opfar-turquesa-suave:  #BFE6EA; /* Turquesa suave */
  --opfar-papel:           #F1F8F8; /* Papel · fondo claro */
  --opfar-blanco:          #FFFFFF;

  /* ---- Extended neutrals (derived from verde profundo / acero) ---- */
  --opfar-ink-900:         #0C2A31; /* darker than verde profundo, for text on light */
  --opfar-ink-700:         #123B44; /* verde profundo */
  --opfar-ink-500:         #3C5A62; /* muted heading */
  --opfar-slate-400:       #6B838A; /* secondary text */
  --opfar-slate-300:       #9AA7AA; /* acero — tertiary text / icons */
  --opfar-line-200:        #D6E4E6; /* borders on paper */
  --opfar-line-100:        #E6F0F1; /* subtle divider */
  --opfar-surface-50:      #F1F8F8; /* papel */
  --opfar-surface-0:       #FFFFFF;

  /* ---- Semantic status ---- */
  --opfar-success:         #1F9D6B;
  --opfar-success-soft:    #E3F4EC;
  --opfar-warning:         #D98A1F;
  --opfar-warning-soft:    #FBEEDA;
  --opfar-danger:          #D0453B;
  --opfar-danger-soft:     #FBE5E3;
  --opfar-info:            #0FA3B4;
  --opfar-info-soft:       #DFF2F4;

  /* ---- Semantic aliases (use these in components/UI) ---- */
  --color-primary:            var(--opfar-turquesa);
  --color-primary-hover:      #0C8B9A;   /* darker turquesa for hover */
  --color-primary-active:     #0A7581;   /* darker still for press */
  --color-primary-soft:       var(--opfar-turquesa-suave);
  --color-primary-tint:       var(--opfar-info-soft);
  --color-on-primary:         #FFFFFF;

  --text-strong:              var(--opfar-ink-900);
  --text-body:                var(--opfar-ink-700);
  --text-muted:               var(--opfar-slate-400);
  --text-subtle:              var(--opfar-slate-300);
  --text-on-dark:             #EAF6F7;
  --text-link:                var(--opfar-turquesa);
  --text-link-hover:          var(--color-primary-hover, #0C8B9A);

  --surface-page:             var(--opfar-surface-50);
  --surface-card:             var(--opfar-surface-0);
  --surface-sunken:           #E9F3F4;
  --surface-dark:             var(--opfar-verde-profundo);
  --surface-dark-2:           #0C2A31;

  --border-default:           var(--opfar-line-200);
  --border-subtle:            var(--opfar-line-100);
  --border-strong:            var(--opfar-slate-300);
  --border-focus:             var(--opfar-turquesa);
}

/* ---------- typography.css ---------- */
/* OPFAR — Tipografía
   Sora (titulares/wordmark) · Space Grotesk (texto/UI) · Space Mono (datos) */

:root {
  /* ---- Families ---- */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;   /* titulares + wordmark */
  --font-body:    'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; /* cuerpos, UI */
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;     /* datos, códigos */

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:    700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* ---- Type scale (px, rem-friendly) ---- */
  --fs-display-xl: 56px;
  --fs-display-l:  44px;
  --fs-display-m:  34px;
  --fs-h1: 28px;
  --fs-h2: 22px;
  --fs-h3: 18px;
  --fs-body-lg: 17px;
  --fs-body: 15px;
  --fs-body-sm: 13px;
  --fs-caption: 12px;
  --fs-mono: 13px;

  /* ---- Line heights ---- */
  --lh-tight: 1.1; /* @kind font */
  --lh-heading: 1.2; /* @kind font */
  --lh-snug: 1.4; /* @kind font */
  --lh-body: 1.55; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-display: -0.02em; /* @kind font */
  --ls-heading: -0.01em; /* @kind font */
  --ls-body: 0; /* @kind font */
  --ls-eyebrow: 0.14em; /* @kind font */  /* uppercase eyebrows / technical labels */
  --ls-mono: 0.02em; /* @kind font */
}

/* ---------- spacing.css ---------- */
/* OPFAR — Espaciado, radios, sombras, capas
   Retícula base = 4px (manual: retícula base 44px para el emblema; UI usa 4px). */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --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;
  --space-20: 80px;

  /* ---- Radii ---- (círculo es la primitiva de marca → radios generosos) */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Border widths ---- */
  --border-width: 1px; /* @kind spacing */
  --border-width-strong: 2px; /* @kind spacing */

  /* ---- Shadows (cool, low-spread — clean/clinical, never heavy) ---- */
  --shadow-xs: 0 1px 2px rgba(18, 59, 68, 0.06);
  --shadow-sm: 0 1px 3px rgba(18, 59, 68, 0.08), 0 1px 2px rgba(18, 59, 68, 0.04);
  --shadow-md: 0 4px 12px rgba(18, 59, 68, 0.08), 0 2px 4px rgba(18, 59, 68, 0.04);
  --shadow-lg: 0 12px 28px rgba(18, 59, 68, 0.12), 0 4px 8px rgba(18, 59, 68, 0.05);
  --shadow-focus: 0 0 0 3px rgba(15, 163, 180, 0.28);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */

  /* ---- Layout ---- */
  --container-max: 1200px; /* @kind spacing */
  --sidebar-width: 248px; /* @kind spacing */
  --header-height: 60px; /* @kind spacing */

  /* ---- Z layers ---- */
  --z-base: 1; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-overlay: 500; /* @kind other */
  --z-modal: 1000; /* @kind other */
  --z-toast: 1500; /* @kind other */
}