/* ──────────────────────────────────────────────────────── Axon Design Tokens — fonte única de verdade Onda 1 — 2026-05 Carregar ANTES de axon.css e app.css ──────────────────────────────────────────────────────── */ :root { /* ─── Paleta principal ─── */ --axon-bg: #ffffff; --axon-surface: #fafafa; --axon-surface-2: #f4f4f5; --axon-text: #18181b; --axon-text-muted: #71717a; --axon-text-subtle: #a1a1aa; --axon-border: #e4e4e7; --axon-border-strong: #d4d4d8; --axon-accent: #4f46e5; --axon-accent-dim: #4338ca; --axon-accent-subtle: #eef2ff; /* ─── Gradients dark-mode-aware (Onda 5A) ─── */ /* Billing trial banner / Pro highlight */ --axon-gradient-billing: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); /* Dropzone (branding upload) — base + accent ao hover/drag */ --axon-dropzone-bg: var(--axon-surface); --axon-dropzone-bg-hover: var(--axon-accent-subtle); --axon-dropzone-border: var(--axon-border-strong); /* ─── Semânticas ─── */ --axon-success: #10b981; --axon-warning: #f59e0b; --axon-danger: #ef4444; --axon-info: #3b82f6; /* ─── Origo legacy (mantém compat com axon.css existente) ─── */ --axon-ink: #18181b; --axon-canvas: #ffffff; --axon-canvas-soft: #fafafa; --axon-clay: #c2410c; --axon-fog: #71717a; --axon-primary: #4f46e5; --axon-primary-dark: #4338ca; --axon-primary-soft: #eef2ff; --axon-warn: #f59e0b; --axon-radius-card: 12px; --axon-radius-btn: 8px; /* ─── Spacing 8pt grid ─── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ─── Radius ─── */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; /* ─── Shadow multilayer (subtle, não-2020s) ─── */ --shadow-xs: 0 1px 2px rgba(15,23,42,.04); --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); --shadow-md: 0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04); --shadow-lg: 0 12px 28px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06); --shadow-xl: 0 24px 56px rgba(15,23,42,.12), 0 8px 20px rgba(15,23,42,.08); /* ─── Motion ─── */ --motion-instant: 50ms; --motion-fast: 150ms; --motion-base: 200ms; --motion-slow: 300ms; --ease-out: cubic-bezier(.16,1,.3,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); /* ─── Z-index ─── */ --z-dropdown: 1000; --z-sticky: 1100; --z-modal: 1200; --z-popover: 1300; --z-toast: 1400; /* ─── Typography scale (mobile-first) ─── */ --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 36px; /* ─── Line heights ─── */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-base: 1.5; --lh-loose: 1.75; } /* ──────────────────────────────────────────────────────── Dark mode — só ativa quando data-theme="dark" no (preliminar — refinamento visual fica pra Onda 3) ──────────────────────────────────────────────────────── */ :root[data-theme="dark"] { --axon-bg: #0a0a0a; --axon-surface: #18181b; --axon-surface-2: #27272a; --axon-text: #fafafa; --axon-text-muted: #a1a1aa; --axon-text-subtle: #71717a; --axon-border: #27272a; --axon-border-strong: #3f3f46; --axon-accent: #818cf8; --axon-accent-dim: #6366f1; --axon-accent-subtle: rgba(79,70,229,.18); /* Gradients dark — Onda 5A (subtler, respeita fundo escuro) */ --axon-gradient-billing: linear-gradient(135deg, rgba(79,70,229,.08) 0%, rgba(79,70,229,.16) 100%); --axon-dropzone-bg: var(--axon-surface); --axon-dropzone-bg-hover: rgba(129,140,248,.10); --axon-dropzone-border: var(--axon-border-strong); /* Compat Origo */ --axon-ink: #fafafa; --axon-canvas: #0a0a0a; --axon-canvas-soft: #18181b; --axon-fog: #a1a1aa; --axon-primary: #818cf8; --axon-primary-dark: #6366f1; --axon-primary-soft: rgba(79,70,229,.18); /* Shadows mais densas em dark */ --shadow-xs: 0 1px 2px rgba(0,0,0,.4); --shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 4px 12px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3); --shadow-lg: 0 12px 28px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.35); --shadow-xl: 0 24px 56px rgba(0,0,0,.6), 0 8px 20px rgba(0,0,0,.4); } /* ──────────────────────────────────────────────────────── Auto: respeita preferência do SO se data-theme="auto" ──────────────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --axon-bg: #0a0a0a; --axon-surface: #18181b; --axon-surface-2: #27272a; --axon-text: #fafafa; --axon-text-muted: #a1a1aa; --axon-text-subtle: #71717a; --axon-border: #27272a; --axon-border-strong: #3f3f46; --axon-accent: #818cf8; --axon-accent-dim: #6366f1; --axon-accent-subtle: rgba(79,70,229,.18); /* Gradients dark — auto (Onda 5A) */ --axon-gradient-billing: linear-gradient(135deg, rgba(79,70,229,.08) 0%, rgba(79,70,229,.16) 100%); --axon-dropzone-bg: var(--axon-surface); --axon-dropzone-bg-hover: rgba(129,140,248,.10); --axon-dropzone-border: var(--axon-border-strong); --axon-ink: #fafafa; --axon-canvas: #0a0a0a; --axon-canvas-soft: #18181b; --axon-fog: #a1a1aa; --axon-primary: #818cf8; --axon-primary-dark: #6366f1; --axon-primary-soft: rgba(79,70,229,.18); } }