/* ===================================================================== Iracema de Moura — Estética & Bem-estar Design tokens: color, type, spacing, radii, shadows, motion. ===================================================================== */ /* Google Fonts loaded via in for non-blocking parallel fetch. */ :root { /* ---------- Brand palette (from brief) ---------- */ --paper: #ffffff; /* Pure paper. Max breathing room. */ --stone: #e4e4e4; /* Cool light neutral. */ --caramel: #ccaa6e; /* Mustard/caramel. Secondary accent. */ --clay: #c1805a; /* Terracotta. The protagonist / CTA. */ --coffee: #7b5e4d; /* Dark coffee brown. Body text / contrast. */ --sand: #c4bdb4; /* Warm beige ambient (reference image bg). */ /* ---------- Derived tints ---------- */ --cream: #f6f1ea; /* Warmer surface alternative to stone. */ --linen: #ece4d7; /* Subtle warm panel. */ --clay-soft: #e8cdb9; /* Wash for hover / selected. */ --clay-deep: #a86b48; /* Pressed / hover-dark of clay. */ --coffee-soft: #a98c7a; /* Muted text, captions. */ --ink: #3e2f25; /* Near-black headings. */ /* ---------- Signature accent ---------- */ /* Echoes the green script embroidered on Iracema's lab coat. Use SPARINGLY as a secondary trim: italicised signatures, small decorative lines, hover micro-accents on dark surfaces. */ --sage: #6e9474; --sage-soft: #c7d6c5; --sage-deep: #4f7256; /* ---------- Semantic surface ---------- */ --bg: var(--paper); --bg-muted: var(--cream); --bg-warm: var(--sand); --surface: var(--paper); --surface-2: var(--cream); /* ---------- Semantic text ---------- */ --fg: var(--coffee); --fg-strong: var(--ink); --fg-muted: var(--coffee-soft); --fg-on-clay: var(--paper); --fg-link: var(--clay-deep); /* ---------- Borders & lines ---------- */ --line: rgba(123, 94, 77, 0.14); --line-strong: rgba(123, 94, 77, 0.28); /* ---------- Type families ---------- */ --font-display: "Cormorant Garamond", "Cormorant", "Times New Roman", serif; --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* ---------- Type scale ---------- */ --fs-eyebrow: 12px; --fs-caption: 13px; --fs-body: 16px; --fs-body-lg: 18px; --fs-h6: 18px; --fs-h5: 22px; --fs-h4: 28px; --fs-h3: 36px; --fs-h2: 48px; --fs-h1: 64px; --fs-display: 88px; /* ---------- Line heights ---------- */ --lh-tight: 1.04; --lh-snug: 1.18; --lh-normal: 1.45; --lh-relaxed: 1.6; --lh-loose: 1.75; /* ---------- Tracking ---------- */ --tr-tight: -0.02em; --tr-normal: 0; --tr-wide: 0.04em; --tr-eyebrow: 0.18em; /* ---------- Spacing scale (4px base) ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* ---------- Radii ---------- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 40px; --r-pill: 999px; /* ---------- Shadows ---------- */ --shadow-1: 0 1px 2px rgba(62, 47, 37, 0.06); --shadow-2: 0 8px 24px -8px rgba(62, 47, 37, 0.12); --shadow-3: 0 24px 60px -20px rgba(62, 47, 37, 0.18); --shadow-inset: inset 0 0 0 1px var(--line); /* ---------- Motion ---------- */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 420ms; /* ---------- Layout ---------- */ --container: 1200px; --reading: 640px; --gutter: 24px; } /* ===================================================================== Base ===================================================================== */ html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--clay-soft); color: var(--ink); } /* ===================================================================== Semantic elements ===================================================================== */ .display, .h0 { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--fg-strong); text-wrap: balance; } h1, .h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--fg-strong); margin: 0 0 var(--s-6); text-wrap: balance; } h2, .h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--fg-strong); margin: 0 0 var(--s-5); text-wrap: balance; } h3, .h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg-strong); margin: 0 0 var(--s-4); } h4, .h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--fg-strong); margin: 0 0 var(--s-3); } h5, .h5 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h5); line-height: var(--lh-snug); color: var(--fg-strong); margin: 0 0 var(--s-3); } h6, .h6 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h6); line-height: var(--lh-normal); color: var(--fg-strong); margin: 0 0 var(--s-2); } p { margin: 0 0 var(--s-4); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg); text-wrap: pretty; } .lead { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg); } small, .caption { font-size: var(--fs-caption); color: var(--fg-muted); line-height: var(--lh-normal); } .eyebrow { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tr-eyebrow); color: var(--clay-deep); } .script { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--coffee); } a { color: var(--fg-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--clay-deep); } code, kbd, .mono { font-family: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace; font-size: 0.92em; background: var(--cream); padding: 0.1em 0.4em; border-radius: var(--r-sm); color: var(--coffee); } hr { border: 0; height: 1px; background: var(--line); margin: var(--s-8) 0; } /* ===================================================================== Utility tokens (helpers some kits use) ===================================================================== */ .bg-paper { background: var(--paper); } .bg-cream { background: var(--cream); } .bg-sand { background: var(--sand); } .bg-stone { background: var(--stone); } .bg-clay { background: var(--clay); color: var(--paper); } .bg-coffee { background: var(--coffee); color: var(--paper); } .bg-caramel { background: var(--caramel); color: var(--ink); } .fg-clay { color: var(--clay-deep); } .fg-coffee { color: var(--coffee); } .fg-caramel { color: var(--caramel); } .fg-ink { color: var(--ink); } .fg-muted { color: var(--fg-muted); } /* ===================================================================== Keyboard focus + skip link ===================================================================== */ :focus-visible { outline: 2px solid var(--clay-deep); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 12px 18px; z-index: 100; text-decoration: none; border-radius: 0 0 12px 0; } .skip-link:focus { left: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }