/* ========================================================================== Amanda Cavalcanti — Design Tokens Fonte da verdade: brand/tokens.json e brand/DESIGN-SYSTEM.md Temas: light (padrão) e dark. Ativação por prefers-color-scheme ou por atributo data-theme="light" | "dark" no . ========================================================================== */ :root { /* ---- Paleta base (não muda entre temas) ---- */ --ac-ameixa: #392332; --ac-ameixa-deep: #241820; --ac-ameixa-soft: #4A3142; --ac-marfim: #F7F3ED; --ac-marfim-2: #EFE9E1; --ac-marfim-3: #E6DFD5; --ac-terracota: #B35D48; --ac-terracota-light: #C9705A; --ac-terracota-deep: #96493A; --ac-rosa: #D8B8B0; --ac-rosa-light: #E8D3CC; --ac-rosa-deep: #C29E95; --ac-grafite: #292629; --ac-grafite-60: #6B6668; --ac-grafite-40: #9C9799; --ac-white: #FFFFFF; /* ---- Tipografia ---- */ --ac-font-display: "DM Serif Display", "Playfair Display", Georgia, "Times New Roman", serif; --ac-font-text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ac-fs-display-xl: clamp(3rem, 7.5vw, 6rem); /* 48–96px hero */ --ac-fs-display-lg: clamp(2.5rem, 5.5vw, 4.25rem); /* 40–68px seção */ --ac-fs-display-md: clamp(2rem, 3.5vw, 2.75rem); /* 32–44px título */ --ac-fs-display-sm: 1.5rem; /* 24px card */ --ac-fs-lead: clamp(1.125rem, 1.6vw, 1.375rem); /* 18–22px lead */ --ac-fs-body: 1rem; /* 16px */ --ac-fs-small: 0.875rem; /* 14px */ --ac-fs-eyebrow: 0.6875rem; /* 11px */ --ac-fs-micro: 0.625rem; /* 10px */ --ac-lh-display: 1.02; --ac-lh-tight: 1.2; --ac-lh-body: 1.6; --ac-lh-relaxed: 1.75; --ac-ls-display: -0.02em; --ac-ls-eyebrow: 0.28em; --ac-ls-micro: 0.32em; --ac-ls-caps: 0.22em; --ac-fw-regular: 400; --ac-fw-medium: 500; /* ---- Espaçamento (base 4px) ---- */ --ac-space-1: 0.25rem; --ac-space-2: 0.5rem; --ac-space-3: 0.75rem; --ac-space-4: 1rem; --ac-space-5: 1.5rem; --ac-space-6: 2rem; --ac-space-7: 3rem; --ac-space-8: 4rem; --ac-space-9: 6rem; --ac-space-10: 8rem; --ac-section-y: clamp(4rem, 9vw, 7.5rem); --ac-container: 1200px; --ac-gutter: clamp(1.25rem, 5vw, 3.5rem); /* ---- Formas ---- */ --ac-radius-none: 0; --ac-radius-sm: 2px; --ac-radius-pill: 999px; --ac-hairline: 1px; --ac-rule-short: 28px; --ac-frame-size: 28px; /* ---- Movimento ---- */ --ac-ease: cubic-bezier(0.22, 1, 0.36, 1); --ac-dur-fast: 160ms; --ac-dur-base: 260ms; --ac-dur-slow: 520ms; /* ---- Camadas ---- */ --ac-z-nav: 50; --ac-z-overlay: 100; } /* ========================================================================== Tema LIGHT (padrão) ========================================================================== */ :root, :root[data-theme="light"] { color-scheme: light; --ac-bg: var(--ac-marfim); --ac-bg-elevated: var(--ac-white); --ac-bg-muted: var(--ac-marfim-2); --ac-bg-band: var(--ac-ameixa); /* faixa escura de destaque */ --ac-bg-cta: var(--ac-terracota); /* faixa de chamada */ --ac-bg-image-placeholder: var(--ac-rosa); --ac-fg: var(--ac-ameixa); /* títulos */ --ac-fg-body: var(--ac-grafite); /* texto corrido */ --ac-fg-muted: var(--ac-grafite-60); /* legendas, eyebrow */ --ac-fg-on-band: var(--ac-marfim); --ac-fg-on-cta: var(--ac-marfim); --ac-accent: var(--ac-terracota); --ac-accent-hover: var(--ac-terracota-deep); --ac-secondary: var(--ac-rosa); --ac-line: rgba(57, 35, 50, 0.18); --ac-line-strong: var(--ac-ameixa); --ac-line-on-band: rgba(247, 243, 237, 0.28); --ac-btn-primary-bg: var(--ac-ameixa); --ac-btn-primary-fg: var(--ac-marfim); --ac-btn-primary-hover: var(--ac-ameixa-deep); --ac-btn-outline-border: var(--ac-ameixa); --ac-btn-outline-fg: var(--ac-ameixa); --ac-focus: var(--ac-terracota); --ac-shadow: 0 18px 40px -24px rgba(57, 35, 50, 0.35); } /* ========================================================================== Tema DARK ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ac-bg: var(--ac-ameixa-deep); --ac-bg-elevated: var(--ac-ameixa); --ac-bg-muted: #2E1F29; --ac-bg-band: var(--ac-marfim); --ac-bg-cta: var(--ac-terracota); --ac-bg-image-placeholder: var(--ac-rosa-deep); --ac-fg: var(--ac-marfim); --ac-fg-body: var(--ac-marfim-3); --ac-fg-muted: rgba(247, 243, 237, 0.62); --ac-fg-on-band: var(--ac-ameixa); --ac-fg-on-cta: var(--ac-marfim); --ac-accent: var(--ac-terracota-light); --ac-accent-hover: var(--ac-rosa); --ac-secondary: var(--ac-rosa); --ac-line: rgba(247, 243, 237, 0.16); --ac-line-strong: var(--ac-marfim); --ac-line-on-band: rgba(57, 35, 50, 0.22); --ac-btn-primary-bg: var(--ac-marfim); --ac-btn-primary-fg: var(--ac-ameixa); --ac-btn-primary-hover: var(--ac-white); --ac-btn-outline-border: var(--ac-marfim); --ac-btn-outline-fg: var(--ac-marfim); --ac-focus: var(--ac-rosa); --ac-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6); } } :root[data-theme="dark"] { color-scheme: dark; --ac-bg: var(--ac-ameixa-deep); --ac-bg-elevated: var(--ac-ameixa); --ac-bg-muted: #2E1F29; --ac-bg-band: var(--ac-marfim); --ac-bg-cta: var(--ac-terracota); --ac-bg-image-placeholder: var(--ac-rosa-deep); --ac-fg: var(--ac-marfim); --ac-fg-body: var(--ac-marfim-3); --ac-fg-muted: rgba(247, 243, 237, 0.62); --ac-fg-on-band: var(--ac-ameixa); --ac-fg-on-cta: var(--ac-marfim); --ac-accent: var(--ac-terracota-light); --ac-accent-hover: var(--ac-rosa); --ac-secondary: var(--ac-rosa); --ac-line: rgba(247, 243, 237, 0.16); --ac-line-strong: var(--ac-marfim); --ac-line-on-band: rgba(57, 35, 50, 0.22); --ac-btn-primary-bg: var(--ac-marfim); --ac-btn-primary-fg: var(--ac-ameixa); --ac-btn-primary-hover: var(--ac-white); --ac-btn-outline-border: var(--ac-marfim); --ac-btn-outline-fg: var(--ac-marfim); --ac-focus: var(--ac-rosa); --ac-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.6); }