/* ============================================================= Clínica da Cidade — Design Tokens Extracted from https://www.clinicadacidade.com.br/centro-medico/teresina-pi/ Brand uses a teal/cyan ramp internally named "green". ============================================================= */ :root { /* ----------------------------------------------------------- COLOR — Brand teal ramp (source: --green, --lgreen, --dgreen, --green2, --green3 on the live site). ----------------------------------------------------------- */ --cdc-teal-50: #F0FEFF; /* page tint / subtle card bg */ --cdc-teal-100: #D8F5F8; /* accordion bg, soft chip bg */ --cdc-teal-200: #B0F2FF; /* light highlight on dark surfaces */ --cdc-teal-300: #8AD9E2; /* light borders / dividers */ --cdc-teal-400: #00A8BA; /* PRIMARY brand (CTA, header, link) */ --cdc-teal-500: #00808E; /* H3 headings, mid-emphasis text */ --cdc-teal-600: #079FAF; /* footer surface */ --cdc-teal-700: #005A64; /* deep teal text on light tints */ --cdc-teal-900: #00363D; /* darkest brand — body & H1 color */ /* Neutrals */ --cdc-white: #FFFFFF; --cdc-black: #000000; --cdc-ink: #212529; /* fallback body text (Bootstrap) */ /* Accent / status */ --cdc-cap: #BA004B; /* CAP marca (rodapé) */ --cdc-whatsapp: #1DAF10; /* botão WhatsApp */ --cdc-warning: #FFC107; --cdc-success: #198754; --cdc-danger: #DC3545; /* Semantic aliases — prefer these in components */ --color-bg: var(--cdc-white); --color-bg-subtle: var(--cdc-teal-50); --color-bg-soft: var(--cdc-teal-100); --color-surface: var(--cdc-white); --color-surface-brand: var(--cdc-teal-400); --color-surface-footer: var(--cdc-teal-600); --color-text: var(--cdc-teal-900); --color-text-muted: var(--cdc-teal-700); --color-text-on-brand: var(--cdc-white); --color-heading: var(--cdc-teal-900); --color-heading-accent: var(--cdc-teal-500); --color-primary: var(--cdc-teal-400); --color-primary-hover: var(--cdc-teal-500); --color-primary-active: var(--cdc-teal-700); --color-link: var(--cdc-teal-500); --color-border: var(--cdc-teal-300); /* ----------------------------------------------------------- TYPOGRAPHY ----------------------------------------------------------- */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Font sizes (rem-based, 1rem = 16px) */ --fs-10: 0.625rem; /* 10 micro labels */ --fs-12: 0.75rem; /* 12 meta */ --fs-13: 0.8125rem; /* 13 small */ --fs-14: 0.875rem; /* 14 body small / btn */ --fs-16: 1rem; /* 16 body */ --fs-17: 1.0625rem; /* 17 accordion header */ --fs-20: 1.25rem; /* 20 H3 */ --fs-28: 1.75rem; /* 28 H2 */ --fs-30: 1.875rem; /* 30 H1 */ --fs-32: 2rem; /* 32 display */ --fs-38: 2.375rem; /* 38 hero display */ /* Font weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Line heights */ --lh-tight: 1.2; /* headings */ --lh-snug: 1.3; --lh-normal: 1.5; /* body */ --lh-relaxed: 1.6; /* Tracking */ --tracking-normal: 0; /* ----------------------------------------------------------- SPACING — Mirrors WP preset scale used on the site ----------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.44rem; /* 7 — wp 20 */ --space-3: 0.5rem; /* 8 */ --space-4: 0.67rem; /* 11 — wp 30 */ --space-5: 0.75rem; /* 12 */ --space-6: 1rem; /* 16 — wp 40 */ --space-7: 1.25rem; /* 20 — btn padding-x */ --space-8: 1.5rem; /* 24 — wp 50 */ --space-9: 2.25rem; /* 36 — wp 60 */ --space-10: 3.38rem; /* 54 — wp 70 */ --space-11: 5.06rem; /* 81 — wp 80 */ /* ----------------------------------------------------------- RADII — Observed: 6, 10, 12, 16, 18, 20, 32 ----------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 12px; /* buttons, cards, badges (default) */ --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 32px; --radius-pill: 9999px; /* ----------------------------------------------------------- ELEVATION The live site uses NO shadows (flat design). These tokens exist for cases that need elevation (modals, dropdowns). ----------------------------------------------------------- */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(0, 54, 61, 0.06); --shadow-md: 0 4px 12px rgba(0, 54, 61, 0.10); --shadow-lg: 0 12px 32px rgba(0, 54, 61, 0.14); /* ----------------------------------------------------------- LAYOUT ----------------------------------------------------------- */ --container-sm: 540px; --container-md: 720px; --container-lg: 960px; --container-xl: 1140px; --container-xxl:1320px; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --breakpoint-xxl:1400px; /* ----------------------------------------------------------- MOTION ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in: cubic-bezier(0.6, 0, 0.8, 0.2); --duration-1: 120ms; --duration-2: 200ms; --duration-3: 320ms; } /* ============================================================= Base utility hooks — tiny, opinionated. ============================================================= */ html { font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; } h1, .h1 { font: var(--fw-medium) var(--fs-30)/var(--lh-tight) var(--font-sans); color: var(--color-heading); } h2, .h2 { font: var(--fw-medium) var(--fs-28)/var(--lh-tight) var(--font-sans); color: var(--color-heading); } h3, .h3 { font: var(--fw-medium) var(--fs-20)/var(--lh-snug) var(--font-sans); color: var(--color-heading-accent); } h4, .h4 { font: var(--fw-semibold) var(--fs-17)/var(--lh-snug) var(--font-sans); color: var(--color-text-muted); } small, .text-sm { font-size: var(--fs-13); } .text-muted { color: var(--color-text-muted); }