/* ============================================= Design System 1.0 — tokens Origem: skill `design-system` (~/.claude/skills/design-system/assets/). Num projeto, isto é uma CÓPIA: não edite; mude na skill e copie de novo. Camada de APARÊNCIA: tudo que muda entre produtos (paleta, vidro, luz ambiente) vive aqui. Rebrand = editar este arquivo, não os componentes. - Cada cor é light-dark(, ); sem data-theme no , segue prefers-color-scheme. - Carregue DEPOIS do Tailwind (se houver): os nomes de raio (--radius-*) coincidem com os do Tailwind v4 de propósito, então rounded-lg etc. passam a usar a escala daqui. - Fora de @layer de propósito: token sempre vence o tema do Tailwind. ============================================= */ :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } :root { /* ── Superfícies ───────────────────────────── */ --bg: light-dark(#f2f2f7, #000000); /* canvas */ --surface: light-dark(#ffffff, #1c1c1e); /* card, painel */ --surface-2: light-dark(rgba(255, 255, 255, 0.55), rgba(44, 44, 46, 0.45)); /* coluna, bloco translúcido */ --surface-3: light-dark(#f2f2f7, #2c2c2e); /* hover, bloco interno */ --surface-raised: light-dark(rgba(255, 255, 255, 0.7), rgba(58, 58, 60, 0.55)); /* pilha elevada */ --fill: light-dark(rgba(120, 120, 128, 0.12), rgba(120, 120, 128, 0.24)); /* botão cinza, campo, badge */ --fill-hover: light-dark(rgba(120, 120, 128, 0.20), rgba(120, 120, 128, 0.32)); /* ── Vidro — só na camada de controles ─────── */ --glass: light-dark(rgba(255, 255, 255, 0.58), rgba(38, 38, 42, 0.52)); --glass-strong: light-dark(rgba(255, 255, 255, 0.78), rgba(44, 44, 48, 0.78)); --glass-edge: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.14)); --glass-highlight: light-dark(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.22)); --glass-blur: saturate(190%) blur(24px); /* ── Hairlines ─────────────────────────────── */ --border: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.09)); --border-strong: light-dark(rgba(0, 0, 0, 0.12), rgba(255, 255, 255, 0.16)); /* ── Acento: um só, marca o que é clicável ─── */ --accent: light-dark(#0071e3, #0a84ff); --accent-hover: light-dark(#0a7cf0, #3d9bff); --accent-text: #ffffff; --accent-glow: light-dark(rgba(0, 113, 227, 0.7), rgba(10, 132, 255, 0.7)); --accent-bg: light-dark(rgba(0, 113, 227, 0.12), rgba(10, 132, 255, 0.22)); --accent-bg-hover: light-dark(rgba(0, 113, 227, 0.2), rgba(10, 132, 255, 0.32)); --accent-border: light-dark(rgba(0, 113, 227, 0.24), rgba(10, 132, 255, 0.34)); --accent-border-mid: light-dark(rgba(0, 113, 227, 0.40), rgba(10, 132, 255, 0.50)); --accent-border-str: light-dark(rgba(0, 113, 227, 0.64), rgba(10, 132, 255, 0.72)); --link: light-dark(#0066cc, #2997ff); --focus-ring: light-dark(rgba(0, 113, 227, 0.30), rgba(10, 132, 255, 0.45)); /* ── Texto ─────────────────────────────────── */ --text: light-dark(#1d1d1f, #f5f5f7); --text-muted: light-dark(#48484a, #aeaeb2); --text-dim: light-dark(#6e6e73, #8e8e93); /* ── Matizes do sistema ──────────────────────── → fundo sólido, ponto, barra (não use como texto) -text → texto legível (≥ 4.5:1 sobre --surface) -bg → fundo suave de aviso/estado */ --green: light-dark(#34c759, #30d158); --green-text: light-dark(#1d7a35, #30d158); --green-bg: light-dark(rgba(52, 199, 89, 0.14), rgba(48, 209, 88, 0.18)); --red: light-dark(#ff3b30, #ff453a); --red-strong: light-dark(#e3261c, #ff453a); /* botão destrutivo: branco sobre ele passa AA */ --red-text: light-dark(#d70015, #ff6961); --red-bg: light-dark(rgba(255, 59, 48, 0.12), rgba(255, 69, 58, 0.18)); --orange: light-dark(#ff9500, #ff9f0a); --orange-text: light-dark(#b25000, #ffb340); --orange-bg: light-dark(rgba(255, 149, 0, 0.14), rgba(255, 159, 10, 0.18)); --blue: light-dark(#007aff, #0a84ff); --blue-text: light-dark(#0066cc, #409cff); --purple: light-dark(#af52de, #bf5af2); --pink: light-dark(#ff2d55, #ff375f); /* Marca: ícone do app (squircle) */ --brand-gradient: linear-gradient(145deg, #34a4ff 0%, #0071e3 55%, #5e3bdb 100%); /* Gradiente de destaque — só em momentos especiais (vencedor, hero) */ --glow: conic-gradient(from 180deg, #0894ff, #c959dd, #ff2e54, #ff9004, #0894ff); /* Luz ambiente atrás de tudo: é o que o vidro refrata. `none` desliga. */ --ambient: radial-gradient(55rem 38rem at 8% -8%, light-dark(rgba(0, 113, 227, 0.16), rgba(10, 132, 255, 0.22)), transparent 62%), radial-gradient(48rem 36rem at 102% 4%, light-dark(rgba(175, 82, 222, 0.14), rgba(191, 90, 242, 0.20)), transparent 60%), radial-gradient(60rem 42rem at 60% 112%, light-dark(rgba(255, 45, 85, 0.08), rgba(255, 55, 95, 0.12)), transparent 60%); /* ── Forma — raios concêntricos ──────────────── interno ≈ externo − padding. Nomes = Tailwind v4 (rounded-sm … rounded-3xl). */ --radius-sm: 10px; /* botão de menu, chip pequeno */ --radius-md: 14px; /* campo, card dentro de painel */ --radius-lg: 18px; /* card */ --radius-xl: 22px; /* linha de lista, grupo, menu */ --radius-2xl: 26px; /* coluna, painel */ --radius-3xl: 34px; /* alerta, sheet */ --radius-pill: 999px; /* botão, nav, toolbar, toast */ /* ── Elevação ──────────────────────────────── */ --shadow-card: 0 1px 2px light-dark(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.4)), 0 2px 10px light-dark(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.2)); --shadow-lifted: 0 10px 30px -8px light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.6)); --shadow-glass: inset 0 1px 0 var(--glass-highlight), inset 0 0 0 1px var(--glass-edge), 0 8px 32px light-dark(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.55)); --shadow-hero: 0 30px 80px -20px rgba(0, 0, 0, 0.35); /* ── Movimento ─────────────────────────────── */ --ease: cubic-bezier(0.28, 0.11, 0.32, 1); /* padrão */ --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1); /* entradas e pressões: leve overshoot */ /* ── Tipografia ────────────────────────────── */ --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ── Preferências do sistema ───────────────── */ @media (prefers-contrast: more) { :root { --border: light-dark(rgba(0, 0, 0, 0.24), rgba(255, 255, 255, 0.28)); --border-strong: light-dark(rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.4)); --text-dim: light-dark(#48484a, #c7c7cc); --glass: light-dark(rgba(255, 255, 255, 0.92), rgba(28, 28, 30, 0.94)); } } /* Transparência reduzida: vidro vira sólido e a luz ambiente some */ @media (prefers-reduced-transparency: reduce) { :root { --glass: light-dark(#ffffff, #1c1c1e); --glass-strong: light-dark(#ffffff, #2c2c2e); --surface-2: light-dark(#e5e5ea, #1c1c1e); --ambient: none; } }