/* ========================================================================= Leon.Studio — Design System / TOKENS ------------------------------------------------------------------------- Fonte unica de verdade em CSS custom properties. Tudo abaixo (components, animations, tailwind-config.js) consome estes tokens — nunca hex solto. Sumario 1. Cor — marca, neutros, feedback, alfa 2. Gradientes 3. Tipografia — familias, escala, pesos, tracking 4. Espaco, borda, sombra 5. Movimento — duracoes e curvas 6. Camadas (z-index) 7. Superficies semanticas (modo escuro / modo claro) ========================================================================= */ :root { /* --------------------------------------------------------------------- 1. COR — MARCA Verde extraido de conteudo/bg-logo-leonstudio.png. Hex identico nos dois modos de composicao; muda apenas a quantidade de uso. --------------------------------------------------------------------- */ --green-100: #EDF6D8; --green-200: #DCEFB4; --green-300: #C6E084; --green-400: #B8DA65; --green-500: #A9D046; /* BASE — acento oficial da marca */ --green-600: #93B93A; /* hover */ --green-700: #7A9B2E; /* active / texto sobre fundo claro (AA) */ --green-800: #5C7522; --green-900: #3D4E17; --green-500-rgb: 169, 208, 70; --green-500-hsl: 77, 59%, 55%; /* Alfa do acento — unica forma permitida de "diluir" o verde */ --green-04: rgba(169, 208, 70, 0.04); --green-08: rgba(169, 208, 70, 0.08); --green-12: rgba(169, 208, 70, 0.12); --green-20: rgba(169, 208, 70, 0.20); --green-32: rgba(169, 208, 70, 0.32); --green-48: rgba(169, 208, 70, 0.48); --green-64: rgba(169, 208, 70, 0.64); --green-80: rgba(169, 208, 70, 0.80); /* --------------------------------------------------------------------- 1b. COR — NEUTROS (grafite) Escala unica usada nos dois modos: no modo escuro corre do 950 para baixo, no modo claro do 000 (branco gelo) para cima. --------------------------------------------------------------------- */ --ink-000: #F4F5F0; /* branco gelo — fundo do modo claro */ --ink-050: #E8EAE2; --ink-100: #D6D8CE; --ink-200: #B4B7AC; --ink-300: #8E9188; --ink-400: #6B6E66; --ink-500: #4D504A; --ink-600: #34362F; --ink-700: #24261F; --ink-800: #1A1B16; --ink-850: #131410; --ink-900: #0D0E0B; --ink-950: #050505; /* fundo do modo escuro */ --ink-999: #000000; /* preto oficial da marca */ --white: #FFFFFF; /* Alfa do branco — bordas, divisores e vidro no modo escuro */ --white-03: rgba(255, 255, 255, 0.03); --white-05: rgba(255, 255, 255, 0.05); --white-08: rgba(255, 255, 255, 0.08); --white-10: rgba(255, 255, 255, 0.10); --white-16: rgba(255, 255, 255, 0.16); --white-24: rgba(255, 255, 255, 0.24); --white-40: rgba(255, 255, 255, 0.40); --white-64: rgba(255, 255, 255, 0.64); /* Alfa do preto — bordas e divisores no modo claro */ --black-04: rgba(0, 0, 0, 0.04); --black-08: rgba(0, 0, 0, 0.08); --black-12: rgba(0, 0, 0, 0.12); --black-24: rgba(0, 0, 0, 0.24); --black-48: rgba(0, 0, 0, 0.48); --black-72: rgba(0, 0, 0, 0.72); /* --------------------------------------------------------------------- 1c. COR — FEEDBACK Dessaturados de proposito: nunca competem com o verde da marca. --------------------------------------------------------------------- */ --success: #62C97F; --success-bg: rgba(98, 201, 127, 0.12); --warning: #E9B949; --warning-bg: rgba(233, 185, 73, 0.12); --danger: #E0553F; --danger-bg: rgba(224, 85, 63, 0.12); --info: #6E9FD4; --info-bg: rgba(110, 159, 212, 0.12); /* --------------------------------------------------------------------- 2. GRADIENTES --------------------------------------------------------------------- */ --grad-display: linear-gradient(180deg, var(--white) 0%, var(--white) 42%, rgba(255, 255, 255, 0.32) 100%); --grad-display-green: linear-gradient(100deg, var(--white) 0%, var(--green-300) 55%, var(--green-600) 100%); --grad-accent: linear-gradient(120deg, var(--green-400) 0%, var(--green-600) 100%); --grad-hairline: linear-gradient(90deg, transparent 0%, var(--green-48) 50%, transparent 100%); --grad-hairline-white: linear-gradient(90deg, transparent 0%, var(--white-24) 50%, transparent 100%); --grad-veil-up: linear-gradient(180deg, transparent 0%, var(--ink-950) 100%); --grad-veil-down: linear-gradient(180deg, var(--ink-950) 0%, transparent 100%); --grad-glow-radial: radial-gradient(circle at 50% 50%, var(--green-20) 0%, transparent 70%); --grad-conic-shimmer: conic-gradient(from calc(270deg - (var(--spread, 90deg) * 0.5)), transparent 0, var(--shimmer-color, var(--green-500)) var(--spread, 90deg), transparent var(--spread, 90deg)); --grad-ice: linear-gradient(180deg, var(--ink-000) 0%, var(--ink-050) 100%); /* --------------------------------------------------------------------- 3. TIPOGRAFIA --------------------------------------------------------------------- */ --font-display: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif; --font-body: 'Work Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace; /* pesos */ --w-thin: 200; --w-light: 300; --w-regular: 400; --w-medium: 500; /* escala fluida (clamp: min / preferido / max) */ --fs-display-xl: clamp(3.25rem, 9.5vw, 8.5rem); /* 52 -> 136 */ --fs-display-lg: clamp(2.75rem, 7.5vw, 6rem); /* 44 -> 96 */ --fs-h1: clamp(2.5rem, 5.5vw, 4.5rem); /* 40 -> 72 */ --fs-h2: clamp(2rem, 4vw, 3.25rem); /* 32 -> 52 */ --fs-h3: clamp(1.5rem, 2.6vw, 2.25rem); /* 24 -> 36 */ --fs-h4: 1.5rem; /* 24 */ --fs-h5: 1.25rem; /* 20 */ --fs-h6: 1rem; /* 16 */ --fs-body-lg: 1.125rem; /* 18 */ --fs-body: 1rem; /* 16 */ --fs-body-sm: 0.875rem; /* 14 */ --fs-caption: 0.75rem; /* 12 */ --fs-label: 0.6875rem; /* 11 */ --fs-overline: 0.625rem; /* 10 */ --fs-code: 0.8125rem; /* 13 */ /* entrelinha */ --lh-display: 0.88; --lh-tight: 0.95; --lh-snug: 1.15; --lh-normal: 1.4; --lh-relaxed: 1.65; --lh-loose: 1.75; /* tracking */ --ls-tightest: -0.045em; --ls-tighter: -0.035em; --ls-tight: -0.02em; --ls-normal: 0em; --ls-wide: 0.02em; --ls-wider: 0.12em; --ls-widest: 0.18em; --ls-mega: 0.24em; /* --------------------------------------------------------------------- 4. ESPACO / BORDA / SOMBRA --------------------------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --space-32: 8rem; --shell-max: 90rem; /* largura maxima do conteudo */ --shell-pad: 1.5rem; /* respiro lateral mobile */ --shell-pad-lg: 3rem; /* respiro lateral desktop */ /* geometria: reta por padrao (heranca brutalista do Canvas + Mouv); circulo apenas em pills, dots e avatares — eco dos contadores do logo */ --radius-sharp: 0px; --radius-soft: 2px; --radius-card: 4px; --radius-pill: 999px; --hairline: 1px; --border-dark: var(--white-08); --border-dark-strong: var(--white-16); --border-light: var(--black-08); --border-light-strong: var(--black-12); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 24px -6px rgba(0, 0, 0, 0.5); --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.6); --shadow-inset-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); --glow-green-sm: 0 0 16px -2px var(--green-32); --glow-green-md: 0 0 30px -5px var(--green-48); --glow-green-lg: 0 0 60px -10px var(--green-64); --glow-white-sm: 0 0 15px rgba(255, 255, 255, 0.12); /* --------------------------------------------------------------------- 5. MOVIMENTO --------------------------------------------------------------------- */ --dur-instant: 120ms; --dur-fast: 200ms; --dur-base: 300ms; --dur-slow: 500ms; --dur-slower: 700ms; --dur-reveal: 800ms; --dur-ambient: 1000ms; --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out-soft: cubic-bezier(0.4, 0, 0.2, 1); --ease-float: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* --------------------------------------------------------------------- 6. CAMADAS --------------------------------------------------------------------- */ --z-bg: -2; --z-bg-front: -1; --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-nav: 50; --z-overlay: 80; --z-modal: 90; --z-toast: 100; /* --------------------------------------------------------------------- 7. SUPERFICIES SEMANTICAS — MODO ESCURO (padrao das secoes de impacto) --------------------------------------------------------------------- */ --bg: var(--ink-950); --bg-elevated: var(--ink-900); --surface: #0A0A0A; --surface-2: #111111; --surface-hover: #161713; --border: var(--white-08); --border-strong: var(--white-16); --text-primary: var(--white); --text-secondary: #A8ABA1; /* 8.74:1 sobre #050505 — AAA */ --text-tertiary: #7E8178; /* 5.02:1 sobre #050505 — AA */ --text-disabled: #3A3C36; /* 1.82:1 — apenas estado desabilitado */ --accent: var(--green-500); --accent-hover: var(--green-400); --accent-contrast: var(--ink-999); } /* ------------------------------------------------------------------------- 7b. MODO CLARO — nao e "dark mode alternavel": e uma composicao de secao. Aplicar .mode-light no
desejado (predominante no site final). ------------------------------------------------------------------------- */ .mode-light { --bg: var(--ink-000); --bg-elevated: var(--white); --surface: var(--white); --surface-2: var(--ink-050); --surface-hover: var(--ink-050); --border: var(--black-08); --border-strong: var(--black-12); --text-primary: var(--ink-999); --text-secondary: var(--ink-500); --text-tertiary: var(--ink-400); --text-disabled: var(--ink-200); --accent: var(--green-800); /* 4.76:1 sobre branco gelo — AA em texto */ --accent-hover: var(--green-900); --accent-contrast: var(--ink-999); background-color: var(--bg); color: var(--text-secondary); } /* ------------------------------------------------------------------------- Respeito a preferencia de menos movimento — vale para todo o sistema. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0.001ms !important; /* sem isto, conteudo com delay fica invisivel esperando a vez */ animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0.001ms !important; scroll-behavior: auto !important; } }