/* ============================================================= 4utils — Design Tokens (v1.0) Single source of truth para cores, tipografia, espaçamento, radius, elevação, motion e z-index. Conforme DESIGN-SYSTEM §11. ============================================================= */ :root { /* ---------- BRAND --------------------------------------- */ --brand-primary: #4F46E5; --brand-primary-hover: #4338CA; --brand-primary-pressed: #3730A3; --brand-primary-subtle: rgba(79, 70, 229, 0.08); --brand-primary-border: rgba(79, 70, 229, 0.24); --brand-gradient: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); /* ---------- SURFACES (L0 background) -------------------- */ --surface-0: #FFFFFF; --surface-1: linear-gradient(90deg, #FAFAFA 0%, #F0F4FF 100%); --surface-2: url("/assets/img/mesh.svg"); --surface-elevated: #F8FAFC; --surface-sunken: #F1F5F9; /* ---------- GLASS (L1) ---------------------------------- */ --glass-bg-default: rgba(255, 255, 255, 0.65); --glass-bg-strong: rgba(255, 255, 255, 0.80); --glass-bg-subtle: rgba(255, 255, 255, 0.45); --glass-border: rgba(15, 23, 42, 0.06); --glass-border-bright: rgba(255, 255, 255, 0.18); --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.08); --glass-shadow-hover: 0 12px 40px rgba(31, 38, 135, 0.12); --glass-highlight: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%); --glass-blur: 20px; --glass-blur-strong: 40px; --glass-blur-subtle: 10px; /* ---------- TEXT (L2 solid) ----------------------------- */ --text-primary: #0F172A; --text-secondary: #475569; --text-tertiary: #94A3B8; --text-disabled: #CBD5E1; --text-on-brand: #FFFFFF; --text-link: #4F46E5; --text-link-visited: #6D28D9; /* ---------- BORDER -------------------------------------- */ --border-subtle: #F1F5F9; --border-default: #E2E8F0; --border-strong: #CBD5E1; --border-focus: #4F46E5; /* ---------- SEMANTIC ------------------------------------ */ --color-success: #10B981; --color-success-strong: #047857; --color-success-subtle: rgba(16, 185, 129, 0.10); --color-success-border: rgba(16, 185, 129, 0.30); --color-warning: #D97706; --color-warning-subtle: rgba(245, 158, 11, 0.12); --color-warning-border: rgba(245, 158, 11, 0.30); --color-error: #E11D48; --color-error-subtle: rgba(244, 63, 94, 0.10); --color-error-border: rgba(244, 63, 94, 0.30); --color-info: #2563EB; --color-info-subtle: rgba(59, 130, 246, 0.10); --color-info-border: rgba(59, 130, 246, 0.30); /* ---------- TYPOGRAPHY ---------------------------------- */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --font-display: clamp(2rem, 5vw, 3.5rem); --font-h1: clamp(1.75rem, 4vw, 2.5rem); --font-h2: clamp(1.375rem, 3vw, 1.75rem); --font-h3: 1.25rem; --font-h4: 1.125rem; --font-body-lg: 1.125rem; --font-body: 1rem; --font-small: 0.875rem; --font-micro: 0.75rem; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; --tracking-tight: -0.025em; --tracking-snug: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; /* ---------- SPACING (8px scale) ------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---------- RADIUS -------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; --radius-full: 9999px; /* ---------- ELEVATION ----------------------------------- */ --elev-0: none; --elev-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06); --elev-2: 0 4px 8px rgba(15, 23, 42, 0.04), 0 2px 4px rgba(15, 23, 42, 0.06); --elev-3: 0 8px 24px rgba(15, 23, 42, 0.06), 0 4px 8px rgba(15, 23, 42, 0.04); --elev-4: 0 16px 40px rgba(15, 23, 42, 0.08), 0 8px 16px rgba(15, 23, 42, 0.04); --elev-glass: var(--glass-shadow); --elev-glass-hover: var(--glass-shadow-hover); --ring-focus: 0 0 0 3px rgba(79, 70, 229, 0.35); /* ---------- MOTION -------------------------------------- */ --duration-instant: 100ms; --duration-fast: 150ms; --duration-normal: 220ms; --duration-slow: 320ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---------- Z-INDEX ------------------------------------- */ --z-base: 0; --z-dropdown: 50; --z-sticky: 100; --z-drawer: 250; --z-modal: 300; --z-toast: 400; } /* ============================================================= DARK MODE — tokens prontos, lançamento fase 2 Ativar com `data-theme="dark"` no ============================================================= */ [data-theme="dark"] { --surface-0: #0A0A0A; --surface-1: linear-gradient(90deg, #1A1A1F 0%, #0A0A0A 100%); --surface-elevated: #18181B; --surface-sunken: #09090B; --glass-bg-default: rgba(20, 20, 30, 0.65); --glass-bg-strong: rgba(20, 20, 30, 0.85); --glass-bg-subtle: rgba(20, 20, 30, 0.45); --glass-border: rgba(255, 255, 255, 0.08); --glass-border-bright: rgba(255, 255, 255, 0.12); --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); --text-primary: #F8FAFC; --text-secondary: #CBD5E1; --text-tertiary: #64748B; --text-disabled: #334155; --border-subtle: #1E293B; --border-default: #334155; --border-strong: #475569; --brand-primary: #6366F1; --brand-primary-hover: #818CF8; --brand-primary-pressed: #4F46E5; }