/* ============================================================
   tokens.css — Sistema de diseño SC Ingeniería
   Variables CSS (design tokens) reutilizables en todo el sitio.
   Editar SOLO aquí para cambiar paleta, tipografía o espaciado global.
   ============================================================ */

:root {
  /* ============================================================
     1. PALETA DE COLOR
     ============================================================ */

  /* — Verde de marca (UI: botones, links, focus, énfasis) —
     Decisión Sebastián 2026-05-28: variante Bosque-oliva (B), intermedio
     entre el verde menta tech y el verde lima del logo. Mantiene contraste
     WCAG AA sobre blanco en brand-500 y superiores, y se acerca más a la
     identidad gráfica del logotipo. — */
  --color-brand-50:  #eef6ec;
  --color-brand-100: #d2e8cc;
  --color-brand-200: #a9d3a0;
  --color-brand-300: #7fbb72;
  --color-brand-400: #5aa14a;
  --color-brand-500: #3d8b2f;   /* Verde primario Bosque-oliva */
  --color-brand-600: #357827;
  --color-brand-700: #2f6e23;   /* Verde oscuro */
  --color-brand-800: #22531b;
  --color-brand-900: #173a12;

  /* — Verde del logo (preservar identidad gráfica, no usar en UI) — */
  --color-logo-light: #bcca61;
  --color-logo:       #92ab34;
  --color-logo-dark:  #6e8324;

  /* — Escala de grises (neutros) — */
  --color-gray-50:  #f8fafb;
  --color-gray-100: #f1f4f6;
  --color-gray-200: #e4e9ed;
  --color-gray-300: #ced6dc;
  --color-gray-400: #9ba6ae;
  --color-gray-500: #6b757d;
  --color-gray-600: #4a5359;
  --color-gray-700: #353c41;
  --color-gray-800: #20262a;
  --color-gray-900: #11161a;
  --color-gray-950: #070a0c;

  /* — Acentos semánticos — */
  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-danger:  #dc2626;
  --color-info:    #2563eb;

  /* — Azul Telesentinel (uso exclusivo en sección de alianza) — */
  --color-telesentinel: #0a3d8c;

  /* — Color base (blanco/negro y aliases comunes) — */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-bg:    var(--color-white);
  --color-ink:   var(--color-gray-900);
  --color-mute:  var(--color-gray-500);
  --color-line:  var(--color-gray-200);

  /* — Estados de superficie — */
  --surface-base:    var(--color-white);
  --surface-raised:  var(--color-white);
  --surface-sunken:  var(--color-gray-50);
  --surface-inverse: var(--color-gray-900);
  --surface-brand:   var(--color-brand-500);
  --surface-brand-soft: var(--color-brand-50);

  /* ============================================================
     2. TIPOGRAFÍA
     ============================================================ */

  /* Familias */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-sans);

  /* Escala modular (Major Third: 1.250) base 16px */
  --text-2xs: 0.6875rem;   /* 11 px */
  --text-xs:  0.75rem;     /* 12 px */
  --text-sm:  0.875rem;    /* 14 px */
  --text-base: 1rem;       /* 16 px */
  --text-md:  1.125rem;    /* 18 px */
  --text-lg:  1.25rem;     /* 20 px */
  --text-xl:  1.5rem;      /* 24 px */
  --text-2xl: 1.875rem;    /* 30 px */
  --text-3xl: 2.25rem;     /* 36 px */
  --text-4xl: 3rem;        /* 48 px */
  --text-5xl: 3.75rem;     /* 60 px */
  --text-6xl: 4.5rem;      /* 72 px */
  --text-7xl: 5.625rem;    /* 90 px */

  /* Pesos */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;

  /* Alturas de línea */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* Espaciado entre letras */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.12em;

  /* ============================================================
     3. ESPACIADO (escala base 4)
     ============================================================ */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 px */
  --space-2:  0.5rem;    /* 8 px */
  --space-3:  0.75rem;   /* 12 px */
  --space-4:  1rem;      /* 16 px */
  --space-5:  1.25rem;   /* 20 px */
  --space-6:  1.5rem;    /* 24 px */
  --space-8:  2rem;      /* 32 px */
  --space-10: 2.5rem;    /* 40 px */
  --space-12: 3rem;      /* 48 px */
  --space-16: 4rem;      /* 64 px */
  --space-20: 5rem;      /* 80 px */
  --space-24: 6rem;      /* 96 px */
  --space-32: 8rem;      /* 128 px */
  --space-40: 10rem;     /* 160 px */
  --space-48: 12rem;     /* 192 px */

  /* ============================================================
     4. RADIOS DE BORDE
     ============================================================ */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ============================================================
     5. SOMBRAS (sistema multicapa, sutiles, modernas)
     ============================================================ */
  --shadow-xs:  0 1px 2px rgba(7, 10, 12, 0.04);
  --shadow-sm:  0 1px 3px rgba(7, 10, 12, 0.06), 0 1px 2px rgba(7, 10, 12, 0.04);
  --shadow-md:  0 4px 8px -2px rgba(7, 10, 12, 0.08), 0 2px 4px -1px rgba(7, 10, 12, 0.04);
  --shadow-lg:  0 12px 24px -6px rgba(7, 10, 12, 0.10), 0 4px 8px -2px rgba(7, 10, 12, 0.05);
  --shadow-xl:  0 24px 48px -12px rgba(7, 10, 12, 0.14), 0 8px 16px -4px rgba(7, 10, 12, 0.06);
  --shadow-2xl: 0 40px 80px -16px rgba(7, 10, 12, 0.18);
  --shadow-inner: inset 0 1px 2px rgba(7, 10, 12, 0.06);

  /* Anillo de foco (accesibilidad) */
  --ring-brand: 0 0 0 3px rgba(61, 139, 47, 0.30);
  --ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.28);

  /* ============================================================
     6. BREAKPOINTS (solo para referencia; en media queries usar los valores numéricos)
     ============================================================ */
  /*
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
    --bp-2xl: 1536px;
  */

  /* ============================================================
     7. ANIMACIÓN
     ============================================================ */

  /* Duraciones */
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-smooth:  400ms;
  --duration-slow:    600ms;
  --duration-slower:  900ms;

  /* Curvas (easings) */
  --ease-snap:      cubic-bezier(0.4, 0, 0.2, 1);     /* Material-like */
  --ease-elegant:   cubic-bezier(0.16, 1, 0.3, 1);    /* Premium / out-expo */
  --ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-soft:   cubic-bezier(0.4, 0, 1, 1);
  --ease-out-soft:  cubic-bezier(0, 0, 0.2, 1);

  /* Transiciones por defecto reutilizables */
  --transition-base: all var(--duration-normal) var(--ease-snap);
  --transition-color: color var(--duration-fast) var(--ease-snap), background-color var(--duration-fast) var(--ease-snap), border-color var(--duration-fast) var(--ease-snap);

  /* ============================================================
     8. CAPAS Z-INDEX
     ============================================================ */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   500;
  --z-fixed:    1000;
  --z-overlay:  2000;
  --z-modal:    3000;
  --z-toast:    4000;
  --z-max:      9999;

  /* ============================================================
     9. CONTENEDORES (anchos máximos)
     ============================================================ */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;     /* contenedor principal del sitio */
  --container-2xl: 1320px;
  --container-prose: 65ch;     /* lectura cómoda en artículos */

  /* Padding horizontal del contenedor según viewport */
  --gutter: var(--space-4);

  /* ============================================================
     10. ALIASES SEMÁNTICOS (usar estos en componentes, no los crudos)
     ============================================================ */
  --text-color-default:  var(--color-ink);
  --text-color-muted:    var(--color-mute);
  --text-color-inverse:  var(--color-white);
  --text-color-brand:    var(--color-brand-500);
  --text-color-brand-strong: var(--color-brand-700);
  --text-color-danger:   var(--color-danger);
  --text-color-link:     var(--color-brand-600);
  --text-color-link-hover: var(--color-brand-700);

  --border-color-default: var(--color-line);
  --border-color-strong:  var(--color-gray-300);
  --border-color-brand:   var(--color-brand-500);

  --button-radius: var(--radius-md);
  --card-radius:   var(--radius-xl);
  --input-radius:  var(--radius-md);
}

/* ============================================================
   MODO OSCURO (preparado, no obligatorio en lanzamiento)
   ============================================================ */
@media (prefers-color-scheme: dark) {
  /*
   * Mantenemos modo claro por defecto en lanzamiento.
   * Cuando se decida activar modo oscuro, descomentar:
   *
   * :root {
   *   --color-bg:    var(--color-gray-950);
   *   --color-ink:   var(--color-gray-50);
   *   --surface-base: var(--color-gray-900);
   *   --surface-raised: var(--color-gray-800);
   *   --surface-sunken: var(--color-gray-950);
   *   --border-color-default: var(--color-gray-700);
   * }
   */
}

/* ============================================================
   ACCESIBILIDAD: respeto a preferencia de movimiento reducido
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
    --duration-smooth: 0ms;
    --duration-slow:   0ms;
    --duration-slower: 0ms;
  }
}