/* =====================================================================
Oi Aurora — Colors & Type foundations
Source of truth: brand assets (logo + palette card + type card).
Site copy — cópia fiel de `colors_and_type.css` do design system.
Duas únicas mudanças, feitas para performance em produção:
1. o @import do Nunito Sans virou no das páginas
(@import bloqueia o render; o com preconnect não);
2. o caminho da fonte self-hosted aponta para ../fonts/.
===================================================================== */
/* ----- Webfonts -------------------------------------------------------
Display : Hammersmith One (per brand type card — titles, presence)
Body : Nunito Sans (humanist, legible, warm — body companion;
see README "Type substitution" note)
------------------------------------------------------------------- */
/* Hammersmith One — self-hosted from uploaded brand file */
@font-face {
font-family: 'Hammersmith One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/HammersmithOne-Regular.ttf') format('truetype');
}
:root {
/* ---------- Brand core ---------- */
--aurora-orange: #F27405; /* primary — energy, humanity, action */
--aurora-teal: #2EA69A; /* primary — confidence, strategy */
/* ---------- Orange tint ramp (from palette card) ---------- */
--orange-700: #C45D00; /* darkened for hover/press on orange */
--orange-600: #F27405; /* = brand orange */
--orange-400: #F29D52; /* mid tint — warm fills, highlights */
--orange-200: #F2C6A0; /* pale tint — soft surfaces, chips */
--orange-100: #FBE9D8; /* faintest wash — section backgrounds */
/* ---------- Teal tint ramp (derived, harmonised in oklch) ---------- */
--teal-700: #1F7D74; /* darkened for hover/press on teal */
--teal-600: #2EA69A; /* = brand teal */
--teal-400: #6FC4BB; /* mid tint */
--teal-200: #BEE3DE; /* pale tint — soft surfaces */
--teal-100: #E4F3F1; /* faintest wash */
/* ---------- Neutrals ---------- */
--white: #FFFFFF;
--gray-50: #F2F2F2; /* brand light gray — page background */
--gray-100: #E8E8E8;
--gray-200: #D8D8D8; /* hairline borders */
--gray-300: #C4C4C4; /* stronger hairline / disabled border */
--gray-400: #A0A0A0;
--gray-600: #5E5E5E; /* secondary text */
--gray-800: #2B2B2B;
--ink: #1A1A1A; /* primary text / "black" surfaces */
/* ---------- Semantic surface + text ---------- */
--bg: var(--gray-50);
--bg-elevated: var(--white);
--bg-dark: #131516; /* dark mode surface (logo-on-black) */
--fg1: var(--ink); /* primary text */
--fg2: var(--gray-600);/* secondary text */
--fg3: var(--gray-400);/* tertiary / placeholder */
--fg-on-color: var(--white); /* text on orange/teal fills */
--border: var(--gray-200);
--border-strong: var(--gray-300);
/* ---------- Accent roles ---------- */
--accent: var(--aurora-orange); /* primary CTA / action */
--accent-hover: var(--orange-700);
--accent-soft: var(--orange-100);
--secondary: var(--aurora-teal); /* trust / secondary */
--secondary-hover: var(--teal-700);
--secondary-soft: var(--teal-100);
/* ---------- Status (harmonised to palette) ---------- */
--success: #2EA69A; /* reuse teal — on-brand "go" */
--warning: #F29D52;
--danger: #D64545;
--info: #2E7DA6;
/* ---------- Type families ---------- */
--font-display: 'Hammersmith One', system-ui, sans-serif;
--font-body: 'Nunito Sans', system-ui, -apple-system, sans-serif;
/* ---------- Type scale (1.250 major-third, 16px base) ---------- */
--text-xs: 0.75rem; /* 12px — captions, legal */
--text-sm: 0.875rem; /* 14px — meta, labels */
--text-base: 1rem; /* 16px — body */
--text-lg: 1.25rem; /* 20px — lead body / large body */
--text-xl: 1.563rem; /* 25px — h4 / card title */
--text-2xl: 1.953rem; /* 31px — h3 */
--text-3xl: 2.441rem; /* 39px — h2 */
--text-4xl: 3.052rem; /* 49px — h1 */
--text-5xl: 3.815rem; /* 61px — hero display */
--leading-tight: 1.1;
--leading-snug: 1.25;
--leading-normal: 1.55;
/* ---------- Spacing (4px base) ---------- */
--space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
--space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
--space-8: 3rem; --space-10: 4rem; --space-12: 6rem;
/* ---------- Radii (rounded, friendly — echoes logo dots & swatch chips) ---------- */
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-pill: 999px;
/* ---------- Shadows (soft, low, warm-neutral — "respiração") ---------- */
--shadow-sm: 0 1px 2px rgba(26,26,26,.06), 0 1px 3px rgba(26,26,26,.05);
--shadow-md: 0 4px 12px rgba(26,26,26,.07), 0 2px 4px rgba(26,26,26,.05);
--shadow-lg: 0 12px 32px rgba(26,26,26,.10), 0 4px 8px rgba(26,26,26,.05);
--shadow-accent: 0 8px 24px rgba(242,116,5,.28); /* orange CTA glow */
--ease-out: cubic-bezier(.22,.61,.36,1); /* @kind other */
--ease-soft: cubic-bezier(.4,0,.2,1); /* @kind other */
--dur-fast: 140ms; /* @kind other */
--dur-base: 220ms; /* @kind other */
--dur-slow: 360ms; /* @kind other */
}
/* ---------- Dark surface theme — apply via [data-theme="dark"] on a container ---------- */
[data-theme="dark"] {
--bg: #131516;
--bg-elevated: #1B1E20;
--bg-sunken: #0F1112;
--fg1: #F2F2F2;
--fg2: #A8ADB0;
--fg3: #6E7477;
--border: rgba(255,255,255,.08); /* subtle hairline on dark */
--border-strong: rgba(255,255,255,.14);
--accent-soft: rgba(242,116,5,.14);
--secondary-soft: rgba(46,166,154,.14);
--shadow-sm: 0 1px 2px rgba(0,0,0,.35);
--shadow-md: 0 6px 16px rgba(0,0,0,.4);
--shadow-lg: 0 16px 36px rgba(0,0,0,.5);
}
/* =====================================================================
Semantic element defaults — opt in by importing this file.
===================================================================== */
body {
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--fg1);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .display {
font-family: var(--font-display);
font-weight: 400; /* Hammersmith One ships a single weight */
line-height: var(--leading-tight);
letter-spacing: -0.01em;
color: var(--fg1);
text-wrap: balance;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
.hero-display {
font-family: var(--font-display);
font-size: var(--text-5xl);
line-height: var(--leading-tight);
letter-spacing: -0.015em;
}
p, li { line-height: var(--leading-normal); text-wrap: pretty; }
.lead { font-size: var(--text-lg); color: var(--fg2); }
small, .caption { font-size: var(--text-sm); color: var(--fg2); }
.eyebrow {
font-family: var(--font-body);
font-weight: 700;
font-size: var(--text-sm);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent);
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
code, kbd, .mono {
font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
font-size: 0.9em;
}