/* ========================================================================= VARIABLES — Design tokens Fonte única de verdade para cor, tipografia, espaço, profundidade e tempo. Nenhum valor bruto deve aparecer nos demais arquivos. ====================================================================== */ :root { /* --------------------------------------------------------------------- Marca — vermelho #CE1507 (logo Dra Gislany) + bronze de apoio ------------------------------------------------------------------ */ --brand-50: #FEF2F1; --brand-100: #FDE0DD; --brand-200: #FAC1BB; --brand-300: #F5938A; --brand-400: #EC5C4F; --brand-500: #CE1507; /* cor principal */ --brand-600: #B41205; --brand-700: #8F0E04; --brand-800: #6B0B03; --bronze-050: #FBF3EC; --bronze-400: #C07A44; --bronze-500: #9C4A1A; /* detalhe do símbolo da logo */ --bronze-600: #7A3712; /* --------------------------------------------------------------------- Neutros — base quente para acompanhar o vermelho sem esfriar a tela ------------------------------------------------------------------ */ --ink-900: #14100F; --ink-800: #241C1B; --ink-700: #3A2F2E; --ink-600: #574B49; --ink-500: #786A68; --ink-400: #9B8F8D; --ink-300: #C2B9B8; --ink-200: #E2DCDB; --ink-100: #F0ECEB; --ink-050: #F8F6F5; /* --------------------------------------------------------------------- Papéis semânticos (Light Mode — definido no briefing) ------------------------------------------------------------------ */ --color-bg: #FFFFFF; --color-bg-subtle: var(--ink-050); --color-surface: #FFFFFF; --color-text: var(--ink-900); --color-text-soft: var(--ink-600); --color-text-muted: var(--ink-500); --color-border: rgba(20, 16, 15, 0.08); --color-border-strong: rgba(20, 16, 15, 0.14); --color-accent: var(--brand-500); --color-accent-hover: var(--brand-600); --color-focus: var(--brand-500); /* Materiais translúcidos (linguagem "glass" do ecossistema Apple) */ --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-strong: rgba(255, 255, 255, 0.86); --glass-border: rgba(255, 255, 255, 0.65); --glass-blur: saturate(180%) blur(20px); --glass-blur-strong: saturate(180%) blur(32px); /* --------------------------------------------------------------------- Tipografia Stack nativa: idêntica ao SF Pro no macOS/iOS, sem custo de rede (zero requisições = LCP e CLS melhores que qualquer webfont). ------------------------------------------------------------------ */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-numeric: "SF Pro Display", var(--font-sans); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Escala fluida — mesma proporção de 320px a 1920px */ --fs-xs: clamp(0.6875rem, 0.66rem + 0.14vw, 0.75rem); --fs-sm: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem); --fs-base: clamp(0.9375rem, 0.91rem + 0.14vw, 1rem); --fs-md: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --fs-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem); --fs-xl: clamp(1.375rem, 1.24rem + 0.65vw, 1.75rem); --fs-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); --fs-3xl: clamp(2.25rem, 1.8rem + 2.2vw, 3.5rem); --fs-hero: clamp(2.5rem, 1.35rem + 5.6vw, 5.25rem); --fs-stat: clamp(2.5rem, 1.9rem + 2.6vw, 4rem); --lh-tight: 1.04; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; --ls-tighter: -0.045em; --ls-tight: -0.025em; --ls-normal: -0.011em; --ls-wide: 0.02em; --ls-caps: 0.09em; /* --------------------------------------------------------------------- Espaçamento — escala de 4px com passos fluidos nas medidas grandes ------------------------------------------------------------------ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-section: clamp(3.5rem, 2rem + 6vw, 7rem); --gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem); /* --------------------------------------------------------------------- Layout ------------------------------------------------------------------ */ --container-max: 1280px; --container-wide: 1440px; --content-max: 62ch; --header-height: clamp(76px, 5.8vw, 94px); --topbar-height: 38px; /* --------------------------------------------------------------------- Raio e profundidade ------------------------------------------------------------------ */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px; --radius-pill: 999px; /* Sombras em camadas: contato curto + difusão longa (padrão Apple) */ --shadow-xs: 0 1px 2px rgba(20, 16, 15, 0.05); --shadow-sm: 0 1px 2px rgba(20, 16, 15, 0.05), 0 4px 12px rgba(20, 16, 15, 0.05); --shadow-md: 0 2px 4px rgba(20, 16, 15, 0.04), 0 12px 28px rgba(20, 16, 15, 0.08); --shadow-lg: 0 4px 8px rgba(20, 16, 15, 0.04), 0 24px 56px rgba(20, 16, 15, 0.10); --shadow-brand: 0 6px 16px rgba(206, 21, 7, 0.22), 0 18px 40px rgba(206, 21, 7, 0.18); --shadow-brand-hover: 0 8px 20px rgba(206, 21, 7, 0.28), 0 24px 52px rgba(206, 21, 7, 0.22); /* --------------------------------------------------------------------- Movimento — curvas do ecossistema Apple ------------------------------------------------------------------ */ --ease-out: cubic-bezier(0.32, 0.72, 0, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.22, 1.16, 0.36, 1); --dur-fast: 160ms; --dur-base: 260ms; --dur-slow: 420ms; --dur-slower: 720ms; /* --------------------------------------------------------------------- Camadas ------------------------------------------------------------------ */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-scrim: 300; --z-menu: 400; --z-fab: 500; --z-skip: 600; }