/*
 * typography.css
 * Reglas tipográficas globales del tema O Tinglado.
 * Depende de: variables.css
 */

/* -------------------------------------------------- */
/* BASE GLOBAL                                          */
/* -------------------------------------------------- */

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ot-header-height) + var(--ot-space-4));
}

body {
	font-family:    var(--ot-font-sans);
	font-size:      var(--ot-text-base);
	font-weight:    var(--ot-weight-regular);
	line-height:    var(--ot-leading-normal);
	color:          var(--ot-color-text);
	background:     var(--ot-color-bg);
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* -------------------------------------------------- */
/* ENCABEZADOS                                          */
/* -------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-family:  var(--ot-font-sans);
	font-weight:  var(--ot-weight-bold);
	line-height:  var(--ot-leading-tight);
	color:        var(--ot-color-text);
	margin-top:   0;
	margin-bottom: var(--ot-space-4);
}

h1 { font-size: var(--ot-text-4xl); letter-spacing: var(--ot-tracking-tight); }
h2 { font-size: var(--ot-text-3xl); letter-spacing: var(--ot-tracking-tight); }
h3 { font-size: var(--ot-text-2xl); }
h4 { font-size: var(--ot-text-xl);  }
h5 { font-size: var(--ot-text-lg);  }
h6 { font-size: var(--ot-text-md);  }

/* -------------------------------------------------- */
/* PÁRRAFOS Y TEXTO                                     */
/* -------------------------------------------------- */

p {
	margin-top:    0;
	margin-bottom: var(--ot-space-4);
}

strong, b {
	font-weight: var(--ot-weight-bold);
}

em, i {
	font-style: italic;
}

small {
	font-size: var(--ot-text-sm);
}

/* -------------------------------------------------- */
/* ENLACES                                              */
/* -------------------------------------------------- */

a {
	color:           var(--ot-color-text);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition:      color var(--ot-transition), opacity var(--ot-transition);
}

a:hover {
	color:   var(--ot-blue-dark);
	opacity: 0.85;
}

/* -------------------------------------------------- */
/* CÓDIGO Y MONO                                        */
/* -------------------------------------------------- */

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

code {
	background:    var(--ot-blue-lighter);
	color:         var(--ot-blue-dark);
	padding:       0.15em 0.4em;
	border-radius: var(--ot-radius-sm);
}

pre {
	background:    var(--ot-color-surface);
	border:        var(--ot-border-width) solid var(--ot-border-color);
	border-radius: var(--ot-radius-md);
	padding:       var(--ot-space-6);
	overflow-x:    auto;
	margin-bottom: var(--ot-space-6);
}

pre code {
	background: none;
	padding:    0;
}

/* -------------------------------------------------- */
/* LISTAS                                               */
/* -------------------------------------------------- */

ul, ol {
	padding-left:  var(--ot-space-6);
	margin-bottom: var(--ot-space-4);
}

li {
	margin-bottom: var(--ot-space-2);
}

/* -------------------------------------------------- */
/* CITAS                                                */
/* -------------------------------------------------- */

blockquote {
	margin:        0 0 var(--ot-space-6);
	padding:       var(--ot-space-4) var(--ot-space-6);
	border-left:   3px solid var(--ot-blue);
	color:         var(--ot-color-text-muted);
	font-style:    italic;
	background:    var(--ot-blue-lighter);
	border-radius: 0 var(--ot-radius-md) var(--ot-radius-md) 0;
}

blockquote p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------- */
/* SEPARADORES                                          */
/* -------------------------------------------------- */

hr {
	border:        none;
	border-top:    var(--ot-border-width) solid var(--ot-border-color);
	margin:        var(--ot-space-8) 0;
}

/* -------------------------------------------------- */
/* CLASES UTILITARIAS DE TEXTO                          */
/* -------------------------------------------------- */

.ot-label {
	font-size:      var(--ot-text-xs);
	font-weight:    var(--ot-weight-semibold);
	letter-spacing: var(--ot-tracking-widest);
	text-transform: uppercase;
	color:          var(--ot-color-text-muted);
}

.ot-eyebrow {
	font-size:      var(--ot-text-sm);
	font-weight:    var(--ot-weight-semibold);
	letter-spacing: var(--ot-tracking-wider);
	text-transform: uppercase;
	color:          var(--ot-blue-light);
}

.ot-mono {
	font-family: var(--ot-font-mono);
	font-size:   0.92em;
}