/* CIS Brand Tokens
 * Compañía de Innovación de Santiago SpA
 * Una empresa del Círculo de Santiago SpA
 *
 * v0.2 · 2026-04-09 — monochrome-first palette + light mode default
 *
 * NOTA: los tokens --cis-green-* están renombrados semánticamente
 * a "ink" scale (near-black → white) pero conservan el prefijo por
 * backward compat. Refactor de rename pendiente.
 */

:root {
  /* ─── Colors · Primary (ink/monochrome) ─────────────────── */
  /* Antes era "green". Ahora es escala neutral de grafito a blanco. */
  --cis-green-50:  #fafafa;
  --cis-green-100: #f4f4f5;
  --cis-green-200: #e4e4e7;
  --cis-green-300: #d4d4d8;
  --cis-green-400: #a1a1aa;
  --cis-green-500: #52525b;
  --cis-green-600: #27272a;   /* ★ PRIMARY (zinc-800, near-black warm) */
  --cis-green-700: #18181b;   /* zinc-900, darker */
  --cis-green-800: #0c0c0e;
  --cis-green-900: #000000;

  /* Alias semánticos nuevos (usar preferentemente estos) */
  --cis-ink-50:    #fafafa;
  --cis-ink-100:   #f4f4f5;
  --cis-ink-200:   #e4e4e7;
  --cis-ink-300:   #d4d4d8;
  --cis-ink-400:   #a1a1aa;
  --cis-ink-500:   #52525b;
  --cis-ink-600:   #27272a;
  --cis-ink-700:   #18181b;
  --cis-ink-800:   #0c0c0e;
  --cis-ink-900:   #000000;

  --cis-primary:   #18181b;   /* ★ uso recomendado: background botones, texto hero */
  --cis-primary-hover: #000000;

  /* ─── Colors · Accent (clean sky blue) ────────────────── */
  /* Reemplaza cyan. Menos saturado, más "tech" y neutro. */
  --cis-cyan-50:   #eff6ff;
  --cis-cyan-100:  #dbeafe;
  --cis-cyan-200:  #bfdbfe;
  --cis-cyan-300:  #93c5fd;
  --cis-cyan-400:  #60a5fa;
  --cis-cyan-500:  #3b82f6;   /* ★ ACCENT (blue-500) */
  --cis-accent:    #3b82f6;
  --cis-accent-hover: #2563eb;

  /* ─── Estado ────────────────────────────────────────────── */
  --cis-yellow-400: #fbbf24;
  --cis-red-500:    #dc2626;
  --cis-amber-500:  #f59e0b;

  /* ─── Neutral / grays ─────────────────────────────────── */
  --cis-white:     #ffffff;
  --cis-offwhite:  #fafafa;
  --cis-gray-50:   #f8fafc;
  --cis-gray-100:  #f1f5f9;
  --cis-gray-200:  #e2e8f0;
  --cis-gray-300:  #cbd5e1;
  --cis-gray-400:  #94a3b8;
  --cis-gray-500:  #64748b;
  --cis-gray-600:  #475569;
  --cis-gray-700:  #334155;
  --cis-gray-800:  #1e293b;
  --cis-gray-900:  #0f172a;
  --cis-black:     #000000;

  /* ─── Semantic tokens (light mode, por DEFAULT) ────────── */
  --cis-bg:          #ffffff;
  --cis-bg-surface:  #ffffff;
  --cis-bg-elevated: #ffffff;
  --cis-text:        #0a0a0a;
  --cis-text-muted:  #64748b;
  --cis-border:      #e4e4e7;
  --cis-accent-text: #ffffff;
  --cis-link:        #18181b;
  --cis-focus-ring:  #3b82f6;

  /* ─── Typography ────────────────────────────────────────── */
  --cis-font-sans: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cis-font-mono: "JetBrains Mono", "SF Mono", "Menlo", "Monaco", ui-monospace, monospace;
  --cis-font-display: "Inter", -apple-system, sans-serif;

  --cis-text-xs:   0.75rem;
  --cis-text-sm:   0.875rem;
  --cis-text-base: 1rem;
  --cis-text-lg:   1.125rem;
  --cis-text-xl:   1.25rem;
  --cis-text-2xl:  1.5rem;
  --cis-text-3xl:  1.875rem;
  --cis-text-4xl:  2.25rem;
  --cis-text-5xl:  3rem;

  --cis-leading-tight:  1.25;
  --cis-leading-normal: 1.5;
  --cis-leading-loose:  1.75;

  --cis-weight-normal:   400;
  --cis-weight-medium:   500;
  --cis-weight-semibold: 600;
  --cis-weight-bold:     700;

  /* ─── Spacing ────────────────────────────────────────────── */
  --cis-space-1: 0.25rem;
  --cis-space-2: 0.5rem;
  --cis-space-3: 0.75rem;
  --cis-space-4: 1rem;
  --cis-space-6: 1.5rem;
  --cis-space-8: 2rem;
  --cis-space-12: 3rem;
  --cis-space-16: 4rem;

  /* ─── Borders & Radius ───────────────────────────────────── */
  --cis-radius-sm: 0.25rem;
  --cis-radius:    0.375rem;
  --cis-radius-md: 0.5rem;
  --cis-radius-lg: 0.75rem;
  --cis-radius-xl: 1rem;
  --cis-radius-full: 9999px;

  /* ─── Shadows ────────────────────────────────────────────── */
  --cis-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --cis-shadow:    0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --cis-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --cis-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --cis-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* ─── Transitions ────────────────────────────────────────── */
  --cis-transition-fast: 150ms ease;
  --cis-transition:      250ms ease;
  --cis-transition-slow: 400ms ease;
}

/* ─── Dark mode: OPT-IN explícito (no auto por media query) ──
 * Para activarlo, agregar clase .cis-dark al <html> o <body>.
 * NO se aplica automáticamente por prefers-color-scheme.
 */
.cis-dark,
html.cis-dark,
body.cis-dark {
  --cis-bg:          #0a0a0a;
  --cis-bg-surface:  #18181b;
  --cis-bg-elevated: #27272a;
  --cis-text:        #fafafa;
  --cis-text-muted:  #a1a1aa;
  --cis-border:      #27272a;
  --cis-accent-text: #ffffff;
  --cis-link:        #fafafa;
}

/* ─── Base body/typography ─────────────────────────────────── */
body.cis-brand {
  background: var(--cis-bg);
  color: var(--cis-text);
  font-family: var(--cis-font-sans);
  font-size: var(--cis-text-base);
  line-height: var(--cis-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.cis-brand a {
  color: var(--cis-link);
  text-decoration: none;
  transition: color var(--cis-transition-fast);
}

body.cis-brand a:hover {
  color: var(--cis-accent);
  text-decoration: underline;
}