/* ========================================================================= Tijolinho Eco — Design Tokens Source: Manual da Marca (BrandBook ECO) + brand notes from project owner. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Passion+One:wght@400;700;900&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600;8..144,700&display=swap'); :root { /* ----------------------------------------------------------------------- INSTITUTIONAL COLORS (Manual da Marca, pg 5) - All five appear in the brandbook + project notes - CMYK / Pantone values are recorded for print specs ----------------------------------------------------------------------- */ --te-green-dark: #424F39; /* Pantone 7736 C / CMYK 66 79 57 / RGB 66 79 57 — primary brand color, dark sections */ --te-green-light: #8CDA55; /* Pantone 7488 C / CMYK 31 0 52 15 — fresh, sprout, accent */ --te-orange: #FF7347; /* Pantone 164 C / CMYK 0 55 72 0 — "laranja tijolo", primary CTA */ --te-cream: #F5EDE0; /* Light section background, paper-feel */ --te-white: #FFFFFF; /* ----------------------------------------------------------------------- EXTENDED PALETTE (derived for UI states — not in manual) Kept tonally close to the institutional palette. ----------------------------------------------------------------------- */ --te-green-dark-900: #2E3729; /* hover / pressed on dark surfaces */ --te-green-dark-700: #424F39; /* base */ --te-green-dark-500: #5E6E50; /* secondary text on cream */ --te-green-dark-300: #A6B09B; /* borders, dividers on cream */ --te-orange-700: #E45A2E; /* button hover */ --te-orange-900: #C44A23; /* button pressed */ --te-orange-100: #FFE3D8; /* tint for badges, soft fills */ --te-cream-50: #FBF7EE; /* lighter cream variant */ --te-cream-200: #ECE2D0; /* subtle divider on cream sections */ --te-ink: #1C1F18; /* near-black — body text on cream */ --te-ink-soft: #4B4F44; /* secondary body text */ /* SEMANTIC COLORS ------------------------------------------------------- */ --bg-light: var(--te-cream); --bg-lighter: var(--te-white); --bg-dark: var(--te-green-dark); --bg-dark-deeper: var(--te-green-dark-900); --fg-on-light: var(--te-ink); --fg-on-light-soft: var(--te-ink-soft); --fg-on-dark: var(--te-white); --fg-on-dark-soft: #C7CFC1; --accent: var(--te-orange); --accent-hover: var(--te-orange-700); --accent-pressed: var(--te-orange-900); --accent-soft: var(--te-orange-100); --positive: var(--te-green-light); --positive-strong: #5FA632; /* legible on cream */ --border-soft: var(--te-cream-200); --border-on-dark: rgba(255,255,255,0.14); --border-on-light: rgba(28,31,24,0.12); /* ----------------------------------------------------------------------- TYPOGRAPHY - Display / headlines / impact: Passion One (700, 900) - Body, UI, captions: Roboto Flex (300, 400, 500, 600, 700) ----------------------------------------------------------------------- */ --font-display: 'Passion One', 'Oswald', 'Arial Black', system-ui, sans-serif; --font-body: 'Roboto Flex', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Modular scale — 1.250 (major third) on a 16px base */ --fs-12: 0.75rem; /* eyebrow, captions, micro labels */ --fs-14: 0.875rem; /* UI small, helper text */ --fs-16: 1rem; /* body */ --fs-18: 1.125rem; /* body large, intro paragraphs */ --fs-20: 1.25rem; /* small headings (h6 / kicker) */ --fs-24: 1.5rem; /* h5 */ --fs-30: 1.875rem; /* h4 */ --fs-36: 2.25rem; /* h3 */ --fs-48: 3rem; /* h2 */ --fs-64: 4rem; /* h1 */ --fs-80: 5rem; /* display */ --fs-112: 7rem; /* hero display */ /* Line-heights — Passion One sets tight, Roboto Flex sets relaxed */ --lh-display: 0.92; --lh-headline: 1.04; --lh-tight: 1.15; --lh-body: 1.55; --lh-loose: 1.7; /* Tracking — Passion One needs a touch of negative; Roboto Flex stays neutral */ --ls-display: -0.01em; --ls-eyebrow: 0.16em; /* ALL-CAPS micro labels */ --ls-button: 0.04em; --ls-body: 0; /* ----------------------------------------------------------------------- SPACING — 4px base, deliberately small steps near the body ----------------------------------------------------------------------- */ --space-0: 0; --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; --space-32: 128px; /* ----------------------------------------------------------------------- RADII — brand spec: 2–4px. Never balloon-rounded. ----------------------------------------------------------------------- */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; /* default button / card */ --radius-lg: 6px; /* large cards only */ --radius-pill: 999px; /* tags / badges only, use sparingly */ /* ----------------------------------------------------------------------- ELEVATION — quiet, mineral. Avoid floaty drop shadows. ----------------------------------------------------------------------- */ --shadow-1: 0 1px 0 rgba(28,31,24,0.06); --shadow-2: 0 2px 6px rgba(28,31,24,0.08); --shadow-3: 0 8px 24px rgba(28,31,24,0.10); --shadow-inset-soft: inset 0 1px 0 rgba(255,255,255,0.04); /* MOTION --------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 380ms; /* LAYOUT --------------------------------------------------------------- */ --container-max: 1240px; --container-pad: clamp(20px, 4vw, 56px); } /* ========================================================================= Base type — apply via class .te-prose, or use the semantic helpers below. ========================================================================= */ html, body { font-family: var(--font-body); font-size: var(--fs-16); line-height: var(--lh-body); color: var(--fg-on-light); background: var(--bg-light); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .te-display, .te-h1, .te-h2, .te-h3, .te-h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--ls-display); line-height: var(--lh-headline); text-transform: uppercase; } .te-display { font-size: clamp(56px, 10vw, var(--fs-112)); line-height: var(--lh-display); font-weight: 900; } .te-h1 { font-size: clamp(40px, 6vw, var(--fs-64)); font-weight: 900; } .te-h2 { font-size: clamp(32px, 4.5vw, var(--fs-48)); } .te-h3 { font-size: var(--fs-36); } .te-h4 { font-size: var(--fs-30); } .te-h5, .te-h6 { font-family: var(--font-body); font-weight: 700; line-height: var(--lh-tight); } .te-h5 { font-size: var(--fs-24); } .te-h6 { font-size: var(--fs-20); } .te-body-lg { font-size: var(--fs-18); line-height: var(--lh-body); } .te-body { font-size: var(--fs-16); line-height: var(--lh-body); } .te-body-sm { font-size: var(--fs-14); line-height: var(--lh-body); } .te-eyebrow { font-family: var(--font-body); font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-on-light-soft); } .te-caption { font-family: var(--font-body); font-size: var(--fs-12); font-weight: 400; color: var(--fg-on-light-soft); } .te-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }