/* ============================================================ * TEAR · Design Tokens · v0.1 · 2026-05-11 * * Brand fingerprint baseado em DS selection discovery: * - shadcn/ui (architecture · cva-spirit · data-state) * - Geist (typography · spacing) * - Radix Primitives (a11y patterns) * * 3 verdes propostos pra Rafael escolher cor signature. * Toggle via [data-accent="A" | "B" | "C"] no . * * Dark mode = default. Light mode via [data-theme="light"]. * ============================================================ */ :root, [data-theme="dark"] { /* ---------- Surfaces (Geist + Linear inspired) ---------- */ --surface-0: #0a0a0a; /* page background · near-black not pure */ --surface-1: #131313; /* card · panel */ --surface-2: #1c1c1c; /* elevated card · modal */ --surface-3: #262626; /* hover state on cards */ --surface-4: #303030; /* pressed · selected */ /* ---------- Text ---------- */ --text-hi: #fafafa; /* primary text */ --text-md: #a3a3a3; /* secondary · labels */ --text-lo: #6b6b6b; /* placeholders · disabled */ --text-inv: #0a0a0a; /* on light bg · on accent bg */ /* ---------- Borders ---------- */ --border-1: rgba(255, 255, 255, 0.08); /* default */ --border-2: rgba(255, 255, 255, 0.14); /* hover · focus ring outer */ --border-3: rgba(255, 255, 255, 0.22); /* strong */ /* ---------- Semantic ---------- */ --success: #4ade80; --warning: #fbbf24; --danger: #f87171; --info: #60a5fa; /* ---------- Radius (Linear/Vercel inspired · 6-8px) ---------- */ --radius-xs: 4px; --radius-sm: 6px; /* default buttons · inputs */ --radius-md: 8px; /* cards · panels */ --radius-lg: 12px; /* modals · large containers */ --radius-xl: 16px; /* hero sections */ --radius-full: 9999px; /* ---------- Shadow (4 níveis · soft and intentional) ---------- */ --shadow-1: 0 1px 2px rgba(0,0,0,0.32); --shadow-2: 0 2px 6px rgba(0,0,0,0.28), 0 1px 2px rgba(0,0,0,0.20); --shadow-3: 0 6px 18px rgba(0,0,0,0.34), 0 2px 6px rgba(0,0,0,0.20); --shadow-4: 0 16px 40px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.24); --shadow-focus: 0 0 0 3px var(--accent-ring); /* ---------- Spacing (4px base) ---------- */ --space-0: 0; --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; --space-20: 80px; --space-24: 96px; /* ---------- Typography (Geist Sans + Geist Mono + Instrument Serif) ---------- */ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --font-display: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif; --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.875rem; /* 30 */ --text-4xl: 2.25rem; /* 36 */ --text-5xl: 3rem; /* 48 */ --text-6xl: 3.75rem; /* 60 */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.7; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---------- Motion (Linear-like · 100-300ms ease-out) ---------- */ --duration-instant: 80ms; --duration-fast: 120ms; --duration-normal: 180ms; --duration-slow: 280ms; --easing-out: cubic-bezier(0.16, 1, 0.3, 1); /* Linear's signature */ --easing-in-out: cubic-bezier(0.4, 0, 0.2, 1); --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* use sparingly */ /* ---------- Z-index ---------- */ --z-dropdown: 10; --z-sticky: 20; --z-overlay: 30; --z-modal: 40; --z-toast: 50; --z-tooltip: 60; /* ---------- Container widths ---------- */ --width-sm: 640px; --width-md: 768px; --width-lg: 1024px; --width-xl: 1280px; --width-2xl: 1536px; } /* ============================================================ * ACCENT A · Verde-folha vivo (Linear/Cron · fresh · clean) * ============================================================ */ [data-accent="A"] { --accent-50: #ecfdf5; --accent-100: #d1fae5; --accent-200: #a7f3d0; --accent-300: #6ee7b7; --accent-400: #34d399; --accent-500: #10b981; /* primary · CTAs */ --accent-600: #059669; --accent-700: #047857; --accent-800: #065f46; --accent-900: #064e3b; --accent-ring: rgba(16, 185, 129, 0.32); --accent-fg: #ffffff; /* text on accent bg */ } /* ============================================================ * ACCENT B · Sage saturado (slow craft · Costuragi-compatível) * ============================================================ */ [data-accent="B"] { --accent-50: #f0f7f1; --accent-100: #d9ebd8; --accent-200: #b6d6b3; --accent-300: #8fbc8b; --accent-400: #6ba368; --accent-500: #4d8a4a; /* primary · CTAs */ --accent-600: #3d6e3a; --accent-700: #325a30; --accent-800: #2a4a28; --accent-900: #1f3a1d; --accent-ring: rgba(77, 138, 74, 0.32); --accent-fg: #ffffff; } /* ============================================================ * ACCENT C · Oliva escuro (premium · Patagonia · slow business) * ============================================================ */ [data-accent="C"] { --accent-50: #f4f6f0; --accent-100: #e5eada; --accent-200: #ccd5b6; --accent-300: #aabb84; --accent-400: #8a9d5f; --accent-500: #6b7f47; /* primary · CTAs */ --accent-600: #54663a; --accent-700: #424f30; --accent-800: #353f28; --accent-900: #2a3221; --accent-ring: rgba(107, 127, 71, 0.32); --accent-fg: #ffffff; } /* ============================================================ * Default accent = B (Sage saturado · slow-craft compatible) * Cravado por Claude (D9 · 2026-05-11) · revogável por Rafael. * Toggle pra A (verde-folha vivo) ou C (oliva escuro) via . * ============================================================ */ :root:not([data-accent]) { --accent-50: #f0f7f1; --accent-100: #d9ebd8; --accent-200: #b6d6b3; --accent-300: #8fbc8b; --accent-400: #6ba368; --accent-500: #4d8a4a; --accent-600: #3d6e3a; --accent-700: #325a30; --accent-800: #2a4a28; --accent-900: #1f3a1d; --accent-ring: rgba(77, 138, 74, 0.32); --accent-fg: #ffffff; }