/*
* CUBRA Design System — base.css
* Reset + tipografía base + defaults globales
* Requiere: tokens.css cargado antes
*/
/* ── Google Fonts preconnect (declarado en cada ) ──
*/
/* ── Reset ── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
font-family: var(--font-sans);
font-size: var(--text-base);
font-weight: var(--weight-normal);
line-height: var(--leading-relaxed);
color: var(--text);
background-color: var(--surface);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Headings ── */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-head);
font-weight: var(--weight-bold);
line-height: var(--leading-tight);
color: var(--text);
}
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base);}
h6 { font-size: var(--text-sm); }
@media (min-width: 768px) {
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
}
@media (min-width: 1024px) {
h1 { font-size: var(--text-5xl); }
}
/* ── Párrafos y texto ── */
p {
line-height: var(--leading-relaxed);
color: var(--text);
}
p + p {
margin-top: var(--space-4);
}
.text-muted {
color: var(--text-muted);
}
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
/* ── Links ── */
a {
color: var(--brand-primary);
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--transition-fast);
}
a:hover {
color: var(--brand-primary-dark);
}
a:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
/* ── Lists ── */
ul, ol {
padding-left: var(--space-6);
}
li {
line-height: var(--leading-relaxed);
}
/* ── Imágenes ── */
img, svg, video {
display: block;
max-width: 100%;
height: auto;
}
/* ── Code ── */
code, kbd, samp, pre {
font-family: var(--font-mono);
font-size: 0.9em;
}
code {
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.15em 0.4em;
color: var(--brand-primary-dark);
}
pre {
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-4);
overflow-x: auto;
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
}
pre code {
background: none;
border: none;
padding: 0;
color: inherit;
}
/* ── HR ── */
hr {
border: none;
border-top: 1px solid var(--border);
margin: var(--space-8) 0;
}
/* ── Tables ── */
table {
border-collapse: collapse;
width: 100%;
}
th {
font-family: var(--font-head);
font-weight: var(--weight-semibold);
font-size: var(--text-sm);
text-align: left;
padding: var(--space-3) var(--space-4);
background: var(--surface-alt);
border-bottom: 2px solid var(--border);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border);
font-size: var(--text-sm);
vertical-align: top;
}
tr:hover td {
background: var(--surface-alt);
}
/* ── Focus global ── */
:focus-visible {
outline: 2px solid var(--border-focus);
outline-offset: 2px;
}
/* ── Selection ── */
::selection {
background: var(--brand-accent-10);
color: var(--text);
}
/* ── Scrollbar (Webkit) ── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--surface-alt); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }