/* ============================================================ PETRA SAÚDE — Colors & Type foundations (Healthcare palette) Petra Consultoria em Saúde · "A base que sustenta excelência em saúde" ------------------------------------------------------------ v2 — palette retuned from navy/gold (read as "law firm") to a HEALTHCARE language: medical blue (primary) + vital teal (accent) + airy light-blue / white neutrals. Ref: Hospital Albert Einstein. Token names: --blue-* (primary/structure/text), --teal-* (accent). ------------------------------------------------------------ Fonts are Google Fonts SUBSTITUTES for the brand's print fonts. Import in HTML : ============================================================ */ :root { /* ---- Brand palette (healthcare retune) ---- */ --petra-blue: #0C4C86; /* primary medical blue / brand */ --petra-sky: #2E86D8; /* bright accent blue (links) */ --petra-teal: #15B0A3; /* vitality accent (care/health) */ --petra-mist: #E7EFF8; /* airy light-blue surface */ --petra-offwhite:#F3F8FC; /* near-white page ground */ /* ---- Primary BLUE ramp (text · structure · grounds) ---- */ --blue-950: #06203B; --blue-900: #0A3157; /* deep ground (footer / dark bands) */ --blue-800: #0C4C86; /* brand primary · dark sections · headings */ --blue-700: #1160A6; /* hover · necking */ --blue-600: #1E73C0; /* bright link / interactive blue */ --blue-500: #3F6491; /* muted body / secondary text (slate-blue) */ --blue-400: #6E89AC; /* subtle text / minor icons */ --blue-300: #9DB2CB; /* captions / tertiary */ --blue-200: #C7D6E6; --blue-100: #E7EFF8; /* ---- Accent TEAL ramp (vitality) ---- */ --teal-700: #0B7D74; /* text-safe accent on light */ --teal-600: #119A8F; /* accessible accent for small text */ --teal-500: #15B0A3; /* brand accent */ --teal-400: #4CC7BC; /* accent on dark grounds */ --teal-300: #8CDDD5; --teal-200: #C9EFEB; /* ---- Cool / airy neutrals (clinical light) ---- */ --paper: #F3F8FC; /* default light page ground */ --parchment: #E9F2FB; /* light-blue panel / card on light */ --cream: #DCEAF7; /* stronger light-blue fill */ --stone-line: #D2E0EE; /* soft blue hairline on tinted panels */ /* ---- Cool greys ---- */ --gray-100: #F4F7FA; --gray-200: #E6EBF1; --gray-300: #D2DAE3; --gray-400: #A9B4C2; --white: #FFFFFF; /* ============= SEMANTIC TOKENS (light context) ============= */ --bg: var(--paper); --bg-elevated: var(--white); --bg-warm: var(--parchment); /* (now a cool light-blue panel) */ --bg-inverse: var(--blue-800); --fg: #0C3257; /* primary text (deep blue ink) */ --fg-muted: var(--blue-500); /* secondary text */ --fg-subtle: var(--blue-300); /* tertiary / captions */ --fg-on-dark: #EAF3FB; /* primary text on blue */ --fg-on-dark-muted: #AAC2DC; /* secondary on blue */ --accent: var(--teal-500); --accent-text: var(--teal-700); /* accent as readable text on light */ --accent-on-dark:var(--teal-400); --on-accent: #053B37; /* text over teal fills */ --link: var(--blue-600); --border: var(--gray-200); --border-strong: var(--gray-300); --border-warm: var(--stone-line); --border-on-dark: rgba(234,243,251,0.16); --divider-accent: var(--teal-500); /* signature accent rule */ --focus-ring: rgba(21,176,163,0.50); /* ============= TYPE FAMILIES ============= */ --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif; /* engraved caps — wordmark, eyebrows */ --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* editorial headlines & quotes */ --font-sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif; /* body & UI */ /* ---- Type scale ---- */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 3rem; --text-4xl: 4rem; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-loose: 1.7; --tracking-tightest: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.12em; --tracking-widest: 0.28em; /* ---- Radius (architectural, restrained) ---- */ --radius-sm: 3px; --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px; /* ---- Elevation (soft, cool/blue-tinted) ---- */ --shadow-sm: 0 1px 2px rgba(10,49,87,0.07), 0 1px 3px rgba(10,49,87,0.05); --shadow-md: 0 4px 12px rgba(10,49,87,0.09), 0 2px 4px rgba(10,49,87,0.05); --shadow-lg: 0 18px 40px rgba(10,49,87,0.16), 0 6px 14px rgba(10,49,87,0.08); --shadow-gold: 0 8px 24px rgba(21,176,163,0.30); /* (legacy name) accent glow */ --shadow-accent: 0 8px 24px rgba(21,176,163,0.30); /* ---- Spacing scale (8pt base) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --maxw: 1180px; } /* ============= SEMANTIC ELEMENT STYLES ============= */ .petra-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--accent-text); } .petra-h1 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(2.25rem, 5vw, var(--text-4xl)); line-height: var(--leading-tight); letter-spacing: var(--tracking-tightest); color: var(--blue-800); } .petra-h2 { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.75rem, 3.5vw, var(--text-3xl)); line-height: var(--leading-snug); letter-spacing: var(--tracking-tightest); color: var(--blue-800); } .petra-h3 { font-family: var(--font-serif); font-weight: 600; font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--blue-800); } .petra-h-caps { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--blue-800); } .petra-lead { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-md); line-height: var(--leading-loose); color: var(--fg-muted); } .petra-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-muted); } .petra-small { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg-subtle); } .petra-label { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--blue-800); } .petra-rule { width: 56px; height: 2px; border: 0; background: var(--divider-accent); }