/* * Tres Marías — tokens del sistema de diseño. * Paleta tomada del tejido de caña flecha: fibra casi negra, crudo blanqueado, * tostado de sol y terracota. */ :root { /* ---- paleta base ---- */ --ink-900: #1c1712; --ink-700: #3a2f26; --ink-500: #6b5b4c; --sand-050: #fdfbf6; --sand-100: #faf3e6; --sand-200: #f1e4c9; --sand-300: #e4d0a3; --straw-400: #cba26e; --straw-500: #af7f4c; --straw-600: #8f6438; --clay-500: #b85c33; --clay-600: #96471f; --clay-700: #733419; --white: #ffffff; /* ---- alias semánticos ---- */ --bg-page: var(--sand-100); --bg-surface: var(--white); --bg-surface-sunken: var(--sand-200); --bg-inverse: var(--ink-900); --surface-card: var(--white); --surface-card-border: var(--sand-300); --text-primary: var(--ink-900); --text-secondary: var(--ink-500); --text-on-accent: var(--sand-050); --text-on-inverse: var(--sand-100); --text-link: var(--clay-600); --text-link-hover: var(--clay-700); --accent: var(--clay-600); --accent-hover: var(--clay-700); --accent-active: var(--clay-700); --accent-soft: #f4e2d3; --border-default: var(--sand-300); --border-strong: var(--straw-600); --border-focus: var(--clay-600); --state-success: #4d6b3f; --state-warning: #a5772a; --state-danger: #a03a2c; /* ---- tipografía ---- */ --font-display: 'Inika', Georgia, serif; --font-editorial: 'Labrada', Georgia, serif; --font-body: 'Noto Sans', 'Helvetica Neue', sans-serif; --font-mono: 'Noto Sans', 'Helvetica Neue', sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 3rem; --text-4xl: 4rem; --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.55; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.06em; --tracking-wider: 0.14em; /* * Escala de lectura. El control A− / A+ de la barra superior reescribe * estas seis variables multiplicándolas; todo el sitio las usa. */ --t-xs: 13.5px; --t-sm: 16px; --t-base: 18px; --t-lg: 20px; --t-xl: 25px; --t-2xl: 32px; /* ---- espacio y forma ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(28, 23, 18, 0.08); --shadow-md: 0 4px 16px rgba(28, 23, 18, 0.10); --shadow-lg: 0 12px 32px rgba(28, 23, 18, 0.14); --border-width: 1px; --container-max: 1180px; /* márgenes laterales usados por la cabecera, el pie y las secciones */ --gutter: clamp(16px, 4vw, 32px); } /* * Contraste alto. Lo activa el botón de la barra superior poniendo * data-tm-contraste="1" en ; el JS solo cambia ese atributo. */ :root[data-tm-contraste='1'] { --bg-page: #ffffff; --bg-surface: #ffffff; --surface-card: #ffffff; --sand-050: #ffffff; --sand-100: #ffffff; --sand-200: #f2ece0; --sand-300: #1c1712; --border-default: #1c1712; --ink-500: #2c241c; --ink-700: #1c1712; --text-secondary: #1c1712; --accent: #7a3213; --accent-hover: #5c2410; --clay-600: #7a3213; --text-link: #7a3213; --text-link-hover: #5c2410; --straw-400: #f1e4c9; }