/* ============================================================
BAFALLUY — Design tokens
Senior Interior Designer & Project Manager — portfolio profesional.
============================================================ */
/* ---- Fonts ---- */
/* Cargadas en con preconnect + para evitar la cadena render-blocking
del @import. Si este CSS se usa de forma aislada, añade el en tu HTML. */
:root {
/* ============================================================
COLOR — warm architectural neutrals
============================================================ */
/* Base surfaces — crisp, cool, gallery-grade off-whites */
--paper: #EFEDE6; /* primary background — soft chalk */
--bone: #DDD8CB; /* secondary surface */
--stone: #BFB8A6; /* tertiary surface, section breaks */
--linen: #A39C8A; /* dividers, hairlines */
--sand: #807A6C; /* subtle accents */
/* Text — true graphic black */
--ink: #0C0C0A; /* primary text — deep graphic ink */
--graphite: #3F3D38; /* secondary text */
--dust: #7A766C; /* tertiary / captions */
/* Perceptual poles — violet mineral + architectural sage */
--violet-pole: #aca1c5;
--sage-pole: #bac5a1;
/* Accent — kept under legacy names so the existing UI logic stays stable */
--clay: var(--violet-pole); /* primary accent — links, focus, indicators */
--clay-dim: var(--sage-pole);
/* Semantic */
--fg-1: var(--ink);
--fg-2: var(--graphite);
--fg-3: var(--dust);
--fg-inv: var(--paper);
--bg-1: var(--paper);
--bg-2: var(--bone);
--bg-3: var(--stone);
--bg-inv: var(--ink);
--line: var(--linen);
--line-strong: var(--sand);
--accent: var(--clay);
--focus: var(--clay);
/* Status (rare — kept tonal) */
--positive: #5C6E4F;
--warning: #B07A2D;
--danger: #8B3A2F;
/* ============================================================
TYPOGRAPHY
============================================================ */
--font-serif: 'Bodoni Moda', 'Bodoni 72', Didot, 'Didot LT STD', 'Hoefler Text', Georgia, serif;
--font-display: 'Geist', 'Manrope', 'Söhne', 'Neue Haas Grotesk Display', 'Helvetica Neue', Arial, sans-serif;
--font-sans: 'Manrope', 'Söhne', 'Neue Haas Grotesk Text', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
/* Type scale — semantic */
--t-display-1: clamp(3.5rem, 7vw + 1rem, 7.5rem); /* hero */
--t-display-2: clamp(2.75rem, 5vw + 1rem, 5rem); /* section opener */
--t-h1: clamp(2rem, 3vw + 1rem, 3.25rem);
--t-h2: clamp(1.5rem, 1.5vw + 1rem, 2.25rem);
--t-h3: 1.25rem; /* 20px */
--t-eyebrow: 0.75rem; /* 12px — uppercase tag */
--t-body: 1rem; /* 16px */
--t-body-lg: 1.125rem; /* 18px */
--t-small: 0.875rem; /* 14px */
--t-caption: 0.75rem; /* 12px */
/* Weights */
--w-light: 300;
--w-regular: 400;
--w-medium: 500;
--w-semi: 600;
/* Line heights */
--lh-tight: 1.05;
--lh-snug: 1.2;
--lh-normal: 1.5;
--lh-loose: 1.7;
/* Tracking */
--tr-tight: -0.025em;
--tr-snug: -0.015em;
--tr-normal: 0em;
--tr-eyebrow: 0.08em;
/* ============================================================
SPACING (4px base)
============================================================ */
--s-0: 0;
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
--s-10: 128px;
--s-11: 160px;
--s-12: 200px; /* section vertical padding desktop */
/* Layout */
--container-max: 1440px;
--gutter: clamp(20px, 4vw, 48px);
--text-measure: 68ch; /* max width for body copy */
/* ============================================================
SHAPE
============================================================ */
--r-0: 0;
--r-sm: 2px; /* used sparingly on inputs if any */
--r-pill: 999px; /* tags / pills, rare */
/* No shadows. Separation via background contrast or hairline. */
--hairline: 1px solid var(--line);
--hairline-strong: 1px solid var(--line-strong);
/* ============================================================
MOTION
============================================================ */
--ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--dur-fast: 160ms;
--dur-base: 240ms;
--dur-slow: 400ms;
--dur-slower: 700ms;
}
/* ============================================================
BASE ELEMENT STYLES
============================================================ */
html { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-1); }
body { margin: 0; font-size: var(--t-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--w-regular); letter-spacing: var(--tr-snug); }
.display-1 { font-family: var(--font-serif); font-size: var(--t-display-1); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: var(--w-regular); }
.display-2 { font-family: var(--font-serif); font-size: var(--t-display-2); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); font-weight: var(--w-regular); }
.h1 { font-family: var(--font-serif); font-size: var(--t-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); font-weight: var(--w-regular); }
.h2 { font-family: var(--font-sans); font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); font-weight: var(--w-medium); }
.h3 { font-family: var(--font-sans); font-size: var(--t-h3); line-height: var(--lh-snug); font-weight: var(--w-medium); }
.eyebrow { font-family: var(--font-sans); font-size: var(--t-eyebrow); text-transform: uppercase; letter-spacing: var(--tr-eyebrow); color: var(--fg-2); font-weight: var(--w-medium); }
.body { font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-normal); color: var(--fg-1); }
.body-lg { font-family: var(--font-sans); font-size: var(--t-body-lg); line-height: var(--lh-loose); color: var(--fg-1); }
.small { font-family: var(--font-sans); font-size: var(--t-small); line-height: var(--lh-normal); color: var(--fg-2); }
.caption { font-family: var(--font-mono); font-size: var(--t-caption); letter-spacing: 0.02em; color: var(--fg-3); }
em, .italic { font-style: italic; }
a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--accent); border-bottom-color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
hr { border: 0; border-top: var(--hairline); margin: var(--s-7) 0; }
::selection { background: var(--ink); color: var(--paper); }