/* ============================================================ PORTUCAL DESIGN SYSTEM — colors & type Literary + heritage tourism. Cream canvas, deep-green ink, amber as the warm accent. Scholarly, contemplative, Lusophone. Fonts loaded via in base.html — no @import here. ============================================================ */ :root { /* ===== COLORS =========================================== */ --portucal-green: #1A3A2E; /* deep forest — primary ink, headings, nav */ --portucal-green-light: #2E6B50; /* moss — secondary ink, links, active state */ --portucal-amber: #C8873A; /* burnt amber — primary accent, CTA */ --portucal-amber-light: #E8A55A; /* light amber — hover, highlight */ --portucal-cream: #FDFAF6; /* warm cream — canvas, page background */ --portucal-beige: #F2EDE4; /* beige — secondary surface, cards */ /* Derived neutrals (ink opacity scale) */ --portucal-ink: #1A3A2E; --portucal-ink-2: rgba(26, 58, 46, 0.72); --portucal-ink-3: rgba(26, 58, 46, 0.50); --portucal-ink-4: rgba(26, 58, 46, 0.18); --portucal-ink-5: rgba(26, 58, 46, 0.08); /* Inverse */ --portucal-on-dark: #FDFAF6; /* Semantic aliases */ --portucal-bg: var(--portucal-cream); --portucal-bg-elevated: var(--portucal-beige); --portucal-fg: var(--portucal-green); --portucal-fg-2: var(--portucal-ink-2); --portucal-fg-3: var(--portucal-ink-3); --portucal-border: var(--portucal-ink-4); --portucal-border-strong: var(--portucal-green); --portucal-link: var(--portucal-green-light); --portucal-link-hover: var(--portucal-amber); --portucal-focus: var(--portucal-amber); --portucal-error: #B5432A; /* ===== TYPE FAMILIES ==================================== */ --portucal-font-display: "Cormorant Garamond", "Garamond", "EB Garamond", Georgia, serif; --portucal-font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --portucal-font-sans: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --portucal-font-mono: "JetBrains Mono", "SF Mono", "Courier New", monospace; /* ===== SIZE TOKENS ====================================== */ --portucal-size-display-xl: 5.5rem; --portucal-size-display-l: 4rem; --portucal-size-display-m: 3rem; --portucal-size-h1: 2.25rem; --portucal-size-h2: 1.75rem; --portucal-size-h3: 1.375rem; --portucal-size-h4: 1.125rem; --portucal-size-body: 1rem; --portucal-size-body-lg: 1.0625rem; --portucal-size-body-sm: 0.9375rem; --portucal-size-caption: 0.8125rem; --portucal-size-eyebrow: 0.75rem; --portucal-size-micro: 0.6875rem; /* ===== SPACING (8px base) =============================== */ --portucal-space-1: 1px; --portucal-space-2: 2px; --portucal-space-4: 4px; --portucal-space-8: 8px; --portucal-space-12: 12px; --portucal-space-16: 16px; --portucal-space-20: 20px; --portucal-space-24: 24px; --portucal-space-32: 32px; --portucal-space-48: 48px; --portucal-space-64: 64px; --portucal-space-96: 96px; /* ===== RADII ============================================ */ --portucal-radius-2: 2px; --portucal-radius-4: 4px; --portucal-radius-8: 8px; --portucal-radius-12: 12px; --portucal-radius-16: 16px; --portucal-radius-pill: 9999px; /* ===== SHADOWS ========================================== */ --portucal-shadow-1: 0 1px 2px rgba(26, 58, 46, 0.06), 0 1px 1px rgba(26, 58, 46, 0.04); --portucal-shadow-2: 0 4px 12px rgba(26, 58, 46, 0.08), 0 1px 2px rgba(26, 58, 46, 0.04); --portucal-shadow-3: 0 12px 32px rgba(26, 58, 46, 0.10), 0 2px 6px rgba(26, 58, 46, 0.05); --portucal-ring-focus: 0 0 0 3px rgba(200, 135, 58, 0.32); /* ===== MOTION =========================================== */ --portucal-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --portucal-dur-fast: 150ms; --portucal-dur-base: 220ms; } /* ============================================================ SEMANTIC TYPE CLASSES ============================================================ */ .portucal-display-xl, .portucal-display-l, .portucal-display-m { font-family: var(--portucal-font-display); font-weight: 500; color: var(--portucal-green); letter-spacing: -0.01em; line-height: 1.02; } .portucal-display-xl { font-size: var(--portucal-size-display-xl); } .portucal-display-l { font-size: var(--portucal-size-display-l); } .portucal-display-m { font-size: var(--portucal-size-display-m); } .portucal-h1 { font: 600 var(--portucal-size-h1)/1.15 var(--portucal-font-display); color: var(--portucal-green); letter-spacing: -0.005em; } .portucal-h2 { font: 600 var(--portucal-size-h2)/1.2 var(--portucal-font-display); color: var(--portucal-green); } .portucal-h3 { font: 600 var(--portucal-size-h3)/1.25 var(--portucal-font-sans); color: var(--portucal-green); } .portucal-h4 { font: 600 var(--portucal-size-h4)/1.3 var(--portucal-font-sans); color: var(--portucal-green); } .portucal-eyebrow { font: 600 var(--portucal-size-eyebrow)/1.2 var(--portucal-font-sans); text-transform: uppercase; letter-spacing: 0.18em; color: var(--portucal-amber); } .portucal-eyebrow-mono { font: 500 var(--portucal-size-micro)/1.2 var(--portucal-font-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--portucal-ink-3); } .portucal-body { font: 400 var(--portucal-size-body-lg)/1.65 var(--portucal-font-serif); color: var(--portucal-green); } .portucal-body-sans { font: 400 var(--portucal-size-body)/1.55 var(--portucal-font-sans); color: var(--portucal-green); } .portucal-caption { font: 400 var(--portucal-size-caption)/1.5 var(--portucal-font-sans); color: var(--portucal-ink-2); } .portucal-pull { font: italic 500 var(--portucal-size-h2)/1.3 var(--portucal-font-display); color: var(--portucal-green-light); letter-spacing: 0; } /* Scope-level baseline */ .portucal { background: var(--portucal-cream); color: var(--portucal-green); font-family: var(--portucal-font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .portucal a { color: var(--portucal-link); text-decoration: none; text-underline-offset: 3px; transition: color var(--portucal-dur-fast) ease; } .portucal a:hover { color: var(--portucal-link-hover); text-decoration: underline; } .portucal ::selection { background: var(--portucal-amber-light); color: var(--portucal-green); }