/* =============================================================
   DESIGN SYSTEM — Devin Conde Mancilla
   Opción A: "Terminal / Hacker ético"
   Fase 2 — Refactor visual
   ============================================================= */

/* ---------- Design tokens (CSS custom properties) ---------- */
:root {
	/* Tipografía */
	--font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

	/* Escala tipográfica fluida (clamp para responsive) */
	--fs-xs:   0.75rem;     /* 12px */
	--fs-sm:   0.875rem;    /* 14px */
	--fs-base: 1rem;        /* 16px */
	--fs-md:   1.125rem;    /* 18px */
	--fs-lg:   1.5rem;      /* 24px */
	--fs-xl:   2rem;        /* 32px */
	--fs-2xl:  2.5rem;
	--fs-3xl:  3rem;
	--fs-display: clamp(3rem, 7vw, 6rem);
	--fs-hero:    clamp(2.5rem, 6vw, 5rem);

	/* Pesos */
	--fw-light:    300;
	--fw-regular:  400;
	--fw-medium:   500;
	--fw-semibold: 600;
	--fw-bold:     700;

	/* Letter-spacing */
	--ls-tight:  -0.02em;
	--ls-normal: 0;
	--ls-wide:   0.05em;
	--ls-wider:  0.1em;

	/* Espaciado (escala 4px) */
	--sp-1:  0.25rem;  /*  4px */
	--sp-2:  0.5rem;   /*  8px */
	--sp-3:  0.75rem;  /* 12px */
	--sp-4:  1rem;     /* 16px */
	--sp-5:  1.5rem;   /* 24px */
	--sp-6:  2rem;     /* 32px */
	--sp-7:  3rem;     /* 48px */
	--sp-8:  4rem;     /* 64px */
	--sp-9:  6rem;     /* 96px */

	/* Radios */
	--r-sm: 4px;
	--r-md: 8px;
	--r-lg: 12px;
	--r-xl: 16px;
	--r-pill: 999px;

	/* Sombras */
	--shadow-sm: 0 1px 2px rgba(15, 42, 74, 0.06), 0 1px 3px rgba(15, 42, 74, 0.04);
	--shadow-md: 0 4px 6px -1px rgba(15, 42, 74, 0.08), 0 2px 4px -1px rgba(15, 42, 74, 0.04);
	--shadow-lg: 0 10px 25px -3px rgba(15, 42, 74, 0.12), 0 4px 6px -2px rgba(15, 42, 74, 0.05);
	--shadow-xl: 0 20px 40px -5px rgba(15, 42, 74, 0.18);
	--shadow-glow: 0 0 0 1px rgba(255, 91, 46, 0.2), 0 8px 24px -4px rgba(255, 91, 46, 0.25);

	/* Transiciones */
	--tr-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
	--tr-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
	--tr-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

	/* Layout */
	--header-width: 320px;
	--max-content: 1200px;

	/* ===== TEMA CLARO ===== */
	--bg:           #FAFAF7;
	--bg-elev:      #FFFFFF;
	--bg-soft:      #F2F0EA;
	--text:         #1A1D24;
	--text-muted:   #5C6470;
	--text-faint:   #8B95A5;
	--brand:        #0F2A4A;
	--brand-light:  #1E4577;
	--accent:       #FF5B2E;
	--accent-soft:  #FFEAE3;
	--line:         #E5E5DE;
	--line-strong:  #D4D4CC;
	--success:      #16A34A;
	--danger:       #DC2626;
	--code-bg:      #1E2A3A;
	--code-text:    #E6E8EC;

	/* Grano SVG (textura sutil) */
	--grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== TEMA OSCURO ===== */
body.dark-mode {
	--bg:           #0B0E14;
	--bg-elev:      #11151D;
	--bg-soft:      #161B25;
	--text:         #E6E8EC;
	--text-muted:   #A0A8B5;
	--text-faint:   #6B7280;
	--brand:        #4D7CFF;
	--brand-light:  #7A9CFF;
	--accent:       #FF7A4D;
	--accent-soft:  #2A1810;
	--line:         #1E2530;
	--line-strong:  #2A3340;
	--success:      #4ADE80;
	--danger:       #F87171;
	--code-bg:      #050810;
	--code-text:    #B8C0CC;
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.5);
	--shadow-lg: 0 10px 25px -3px rgba(0, 0, 0, 0.6);
	--shadow-xl: 0 20px 40px -5px rgba(0, 0, 0, 0.7);
}

/* ---------- Reset y base ---------- */
* { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

body {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-regular);
	line-height: 1.6;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	transition: background-color var(--tr-base), color var(--tr-base);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	color: var(--text);
	letter-spacing: var(--ls-tight);
	line-height: 1.15;
	margin: 0 0 var(--sp-4);
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

p { margin: 0 0 var(--sp-4); }

a {
	color: var(--brand);
	text-decoration: none;
	transition: color var(--tr-fast);
}
a:hover { color: var(--accent); }

code, pre, kbd, samp {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

::selection {
	background: var(--accent);
	color: #fff;
}

/* Utilidad: etiqueta de sección estilo terminal */
.section-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: var(--ls-wider);
	font-weight: var(--fw-medium);
	margin-bottom: var(--sp-3);
}
.section-tag::before {
	content: '> ';
	color: var(--text-faint);
}

/* Utilidad: número editorial de sección */
.section-number {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	color: var(--text-faint);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-wider);
}