/* ============================================================ _tokens.css — Design tokens globais (Fase 1) ------------------------------------------------------------ Carregado em PRIMEIRO lugar, em TODAS as páginas. Contém SOMENTE variáveis CSS (custom properties). Nenhuma regra de estilo deve viver neste arquivo. ============================================================ */ :root { /* ============================================================ CORES — PALETA DA MARCA (violet / indigo) ============================================================ */ /* Escala violet — roxo principal */ --violet-50: #f5f3ff; --violet-100: #ede9fe; --violet-200: #ddd6fe; --violet-300: #c4b5fd; --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed; /* cor principal do projeto */ --violet-700: #6d28d9; --violet-800: #5b21b6; --violet-900: #4c1d95; --violet-950: #2e1065; /* Escala indigo — usada na parte azulada do gradiente */ --indigo-400: #818cf8; --indigo-500: #6366f1; --indigo-600: #4f46e5; /* Cores específicas do gradiente histórico do projeto (mantidas como tokens para uso em botões/banners/cubos) */ --brand-indigo-grad: #667eea; --brand-violet-grad: #764ba2; /* Aliases semânticos da marca — usar estes nos componentes */ --color-primary: var(--violet-600); --color-primary-hover: var(--violet-700); --color-primary-active: var(--violet-800); --color-primary-light: var(--violet-50); --color-primary-dark: var(--violet-900); --color-accent: var(--indigo-500); /* Gradientes da marca */ --gradient-brand: linear-gradient(135deg, var(--brand-indigo-grad) 0%, var(--brand-violet-grad) 100%); --gradient-brand-reverse: linear-gradient(135deg, var(--brand-violet-grad) 0%, var(--brand-indigo-grad) 100%); --gradient-brand-soft: linear-gradient(135deg, var(--violet-100) 0%, var(--violet-200) 100%); /* ============================================================ CORES — NEUTROS (slate) ============================================================ */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; --slate-950: #020617; --white: #ffffff; --black: #000000; /* ============================================================ CORES — SEMÂNTICAS (feedback) ============================================================ */ --color-success: #16a34a; --color-success-light: #dcfce7; --color-success-dark: #15803d; --color-danger: #dc2626; --color-danger-light: #fee2e2; --color-danger-dark: #b91c1c; --color-warning: #d97706; --color-warning-light: #fef3c7; --color-warning-dark: #b45309; --color-info: #2563eb; --color-info-light: #dbeafe; --color-info-dark: #1d4ed8; /* ============================================================ SUPERFÍCIES (BACKGROUNDS) ============================================================ */ --bg-page: var(--slate-50); /* fundo da página em geral */ --bg-surface: var(--white); /* cards, formulários, painéis */ --bg-elevated: var(--white); /* modais, dropdowns, popovers */ --bg-inverted: var(--slate-900); /* tooltips escuros, faixas escuras */ --bg-code: var(--slate-900); /* textarea/blocos de código */ --bg-overlay: rgba(15, 23, 42, .55); /* ============================================================ TEXTO ============================================================ */ --text-strong: var(--slate-900); /* títulos */ --text-default: var(--slate-800); /* parágrafo, padrão */ --text-muted: var(--slate-500); /* texto secundário */ --text-subtle: var(--slate-400); /* labels, dicas leves */ --text-on-brand: var(--white); /* sobre fundos primários */ --text-on-dark: var(--white); /* sobre fundos invertidos */ --text-link: var(--violet-700); --text-link-hover: var(--violet-900); --text-code: #00ff00; /* verde típico dos blocos monoespaçados */ /* ============================================================ BORDAS ============================================================ */ --border-subtle: var(--slate-100); --border-default: var(--slate-200); --border-strong: var(--slate-300); --border-focus: var(--violet-600); --border-brand: var(--brand-violet-grad); /* ============================================================ TIPOGRAFIA ============================================================ */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'Courier New', monospace; /* Escala tipográfica (base 16 px) */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-md: 1.125rem; /* 18 */ --text-lg: 1.25rem; /* 20 */ --text-xl: 1.5rem; /* 24 */ --text-2xl: 1.875rem; /* 30 */ --text-3xl: 2.25rem; /* 36 */ --text-4xl: 3rem; /* 48 */ /* Pesos */ --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; --font-black: 900; /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Letter spacing */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; /* ============================================================ ESPAÇAMENTO (escala base 4 px) ============================================================ */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ /* ============================================================ RAIOS DE BORDA ============================================================ */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ============================================================ SOMBRAS ============================================================ */ --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, .05); --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, .08), 0 1px 2px -1px rgba(15, 23, 42, .06); --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .06); --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, .10), 0 4px 6px -4px rgba(15, 23, 42, .08); --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, .12), 0 8px 10px -6px rgba(15, 23, 42, .08); --shadow-2xl: 0 25px 50px -12px rgba(15, 23, 42, .25); --shadow-inner: inset 0 2px 4px 0 rgba(15, 23, 42, .06); --shadow-brand: 0 8px 24px -8px rgba(124, 58, 237, .35); --shadow-brand-hover: 0 12px 32px -8px rgba(124, 58, 237, .50); /* ============================================================ TRANSIÇÕES ============================================================ */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-fast: 150ms var(--ease-out); --transition-base: 250ms var(--ease-out); --transition-slow: 400ms var(--ease-out); /* ============================================================ LAYOUT ============================================================ */ --sidebar-width: 260px; --header-height: 72px; --content-max-width: 1200px; --content-narrow-width: 760px; /* ============================================================ Z-INDEX ============================================================ */ --z-base: 1; --z-dropdown: 100; --z-sticky: 900; --z-overlay: 1000; --z-drawer: 1050; --z-modal: 1100; --z-popover: 1200; --z-toast: 1300; --z-tooltip: 1400; /* ============================================================ BREAKPOINTS (somente referência — @media não aceita variável) ------------------------------------------------------------ --bp-mobile: até 640px --bp-tablet: 641px – 1024px --bp-desktop: 1025px ou mais ============================================================ */ }