/* ===================================================== Zippy Site — Design Tokens Adaptado de: Design system firecrawl.html Light (default) + Dark (.dark no ) ===================================================== */ :root { /* Heat scale — acento de marca Zippy (laranja) */ --heat-4: #fa5d190a; --heat-8: #fa5d1914; --heat-12: #fa5d191f; --heat-16: #fa5d1929; --heat-20: #fa5d1933; --heat-40: #fa5d1966; --heat-90: #fa5d19e6; --heat-100: #fa5d19ff; /* Ink + superfície */ --accent-black: #262626ff; --accent-white: #ffffffff; --surface: #ffffffff; --surface-raised: #ffffffff; /* Acentos secundários (uso pontual) */ --accent-amethyst: #9061ffff; --accent-bluetron: #2a6dfbff; --accent-crimson: #eb3424ff; --accent-forest: #42c366ff; --accent-honey: #ecb730ff; /* Black alpha — tintas de foreground sobre superfície */ --black-alpha-1: #00000003; --black-alpha-2: #00000005; --black-alpha-3: #00000008; --black-alpha-4: #0000000a; --black-alpha-5: #0000000d; --black-alpha-6: #0000000f; --black-alpha-7: #00000012; --black-alpha-8: #00000014; --black-alpha-10: #0000001a; --black-alpha-12: #0000001f; --black-alpha-16: #00000029; --black-alpha-20: #00000033; --black-alpha-24: #0000003d; --black-alpha-32: #26262652; --black-alpha-40: #26262666; --black-alpha-48: #2626267a; --black-alpha-56: #2626268f; --black-alpha-64: #262626a3; --black-alpha-72: #262626b8; --black-alpha-88: #262626e0; /* White alpha */ --white-alpha-56: #ffffff8f; --white-alpha-72: #ffffffb8; /* Bordas */ --border-faint: #edededff; --border-muted: #e8e8e8ff; --border-loud: #e6e6e6ff; /* Traços de ilustração (linhas/diagramas) */ --illustrations-faint: #edededff; --illustrations-muted: #e6e6e6ff; --illustrations-default: #dbdbdbff; /* Backgrounds */ --background-base: #f9f9f9ff; --background-lighter: #fbfbfbff; /* Tipografia */ --font-sans: "Inter Tight", "Suisse Intl", ui-sans-serif, system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Escala tipo (size/line/family — usar com font: var(--t-...)) */ --t-display-l: 80px/88px var(--font-sans); --t-display-m: 56px/64px var(--font-sans); --t-title-h: 40px/48px var(--font-sans); --t-body-xl: 24px/32px var(--font-sans); --t-body-l: 18px/28px var(--font-sans); --t-body-m: 16px/24px var(--font-sans); --t-body-s: 14px/20px var(--font-sans); --t-body-input: 16px/24px var(--font-sans); --t-label-xl: 24px/32px var(--font-sans); --t-label-l: 16px/24px var(--font-sans); --t-label-m: 14px/20px var(--font-sans); --t-label-s: 13px/16px var(--font-sans); --t-label-xs: 11px/14px var(--font-sans); --t-mono-s: 13px/16px var(--font-mono); --t-mono-xs: 11px/14px var(--font-mono); /* Espaçamento — base 4px (use múltiplos: 4 8 12 16 20 24 32 40 48 56 64 80) */ --space-2: 2px; --space-4: 4px; --space-6: 6px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-28: 28px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px; --space-80: 80px; /* Raios */ --radius-4: 4px; --radius-6: 6px; --radius-8: 8px; --radius-10: 10px; --radius-12: 12px; --radius-16: 16px; --radius-20: 20px; --radius-full: 999px; /* Sombras */ --shadow-card: 0px 40px 48px -20px rgba(0,0,0,0.02), 0px 32px 32px -20px rgba(0,0,0,0.03), 0px 16px 24px -12px rgba(0,0,0,0.03), 0px 0px 0px 1px rgba(0,0,0,0.03); --shadow-floating: 0px 0px 44px 0px rgba(0,0,0,0.02), 0px 88px 56px -20px rgba(0,0,0,0.03), 0px 56px 56px -20px rgba(0,0,0,0.02), 0px 32px 32px -20px rgba(0,0,0,0.03), 0px 16px 24px -12px rgba(0,0,0,0.03), 0px 0px 0px 1px rgba(0,0,0,0.05); /* Container */ --shell-max: 1280px; --shell-pad: 32px; } /* Dark theme */ .dark { --accent-black: #f5f5f5ff; --surface: #171717ff; --surface-raised: #1f1f1fff; --accent-amethyst: #a07affff; --accent-bluetron: #5a8ffcff; --accent-crimson: #f05545ff; --accent-forest: #5cd47fff; --accent-honey: #f0c550ff; --black-alpha-1: #ffffff03; --black-alpha-2: #ffffff05; --black-alpha-3: #ffffff08; --black-alpha-4: #ffffff0a; --black-alpha-5: #ffffff0d; --black-alpha-6: #ffffff0f; --black-alpha-7: #ffffff12; --black-alpha-8: #ffffff14; --black-alpha-10: #ffffff1a; --black-alpha-12: #ffffff1f; --black-alpha-16: #ffffff29; --black-alpha-20: #ffffff33; --black-alpha-24: #ffffff3d; --black-alpha-32: #ffffff52; --black-alpha-40: #ffffff66; --black-alpha-48: #ffffff7a; --black-alpha-56: #ffffff8f; --black-alpha-64: #ffffffa3; --black-alpha-72: #ffffffb8; --black-alpha-88: #ffffffe0; --white-alpha-56: #0000008f; --white-alpha-72: #000000b8; --border-faint: #2a2a2aff; --border-muted: #333333ff; --border-loud: #404040ff; --illustrations-faint: #2a2a2aff; --illustrations-muted: #3d3d3dff; --illustrations-default: #525252ff; --background-base: #0a0a0aff; --background-lighter: #141414ff; }