mirror of
https://github.com/domfelipe/mika-agent-assist.git
synced 2026-08-07 12:56:51 +00:00
230 lines
8.1 KiB
CSS
230 lines
8.1 KiB
CSS
@import "tailwindcss" source(none);
|
|
@source "../src";
|
|
@import "tw-animate-css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
/*
|
|
* Mika Design System
|
|
* Paleta inspirada em Linear / Supabase / Cal.com.
|
|
* - Primary: Indigo (#6366F1) — confiança e tecnologia
|
|
* - Secondary: Emerald (#10B981) — sucesso/check
|
|
* - Accent: Amber (#F59E0B) — destaque, ponto final do wordmark
|
|
* Todas as cores em oklch.
|
|
*/
|
|
|
|
@theme inline {
|
|
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
--radius-2xl: calc(var(--radius) + 8px);
|
|
--radius-3xl: calc(var(--radius) + 12px);
|
|
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-surface: var(--surface);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-primary-dark: var(--primary-dark);
|
|
--color-primary-light: var(--primary-light);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-destructive-foreground: var(--destructive-foreground);
|
|
--color-success: var(--success);
|
|
--color-success-foreground: var(--success-foreground);
|
|
--color-warning: var(--warning);
|
|
--color-warning-foreground: var(--warning-foreground);
|
|
--color-info: var(--info);
|
|
--color-info-foreground: var(--info-foreground);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
}
|
|
|
|
:root {
|
|
--radius: 0.625rem;
|
|
|
|
/* Mika light tokens */
|
|
--background: oklch(0.985 0 0); /* #FAFAFA */
|
|
--foreground: oklch(0.18 0.04 265); /* #0F172A */
|
|
--surface: oklch(1 0 0); /* #FFFFFF */
|
|
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.18 0.04 265);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.18 0.04 265);
|
|
|
|
--primary: oklch(0.70 0.19 47); /* #F97316 orange-500 */
|
|
--primary-foreground: oklch(0.99 0 0);
|
|
--primary-dark: oklch(0.62 0.20 40); /* #EA580C orange-600 */
|
|
--primary-light: oklch(0.78 0.16 55); /* #FB923C orange-400 */
|
|
|
|
--secondary: oklch(0.83 0.17 85); /* #FACC15 yellow-400 */
|
|
--secondary-foreground: oklch(0.18 0.04 265);
|
|
|
|
--accent: oklch(0.78 0.17 70); /* #F59E0B amber-500 */
|
|
--accent-foreground: oklch(0.18 0.04 265);
|
|
|
|
--muted: oklch(0.96 0.005 256);
|
|
--muted-foreground: oklch(0.55 0.03 256);/* #64748B */
|
|
|
|
--destructive: oklch(0.58 0.24 27); /* #DC2626 red-600 — distinto do laranja */
|
|
--destructive-foreground: oklch(0.99 0 0);
|
|
--success: oklch(0.72 0.17 162); /* #10B981 — sucesso continua verde */
|
|
--success-foreground: oklch(0.99 0 0);
|
|
--warning: oklch(0.78 0.17 70);
|
|
--warning-foreground: oklch(0.18 0.04 265);
|
|
--info: oklch(0.62 0.19 255); /* #3B82F6 blue-500 */
|
|
--info-foreground: oklch(0.99 0 0);
|
|
|
|
--border: oklch(0.92 0.01 256); /* #E2E8F0 */
|
|
--input: oklch(0.92 0.01 256);
|
|
--ring: oklch(0.70 0.19 47);
|
|
|
|
--chart-1: oklch(0.70 0.19 47); /* laranja */
|
|
--chart-2: oklch(0.83 0.17 85); /* amarelo */
|
|
--chart-3: oklch(0.78 0.17 70); /* âmbar */
|
|
--chart-4: oklch(0.62 0.20 40); /* laranja escuro */
|
|
--chart-5: oklch(0.72 0.17 162); /* verde sucesso */
|
|
|
|
--sidebar: oklch(1 0 0);
|
|
--sidebar-foreground: oklch(0.18 0.04 265);
|
|
--sidebar-primary: oklch(0.70 0.19 47);
|
|
--sidebar-primary-foreground: oklch(0.99 0 0);
|
|
--sidebar-accent: oklch(0.96 0.005 256);
|
|
--sidebar-accent-foreground: oklch(0.18 0.04 265);
|
|
--sidebar-border: oklch(0.92 0.01 256);
|
|
--sidebar-ring: oklch(0.70 0.19 47);
|
|
|
|
/* Gradientes & sombras Mika — calor de pôr-do-sol */
|
|
--gradient-hero: radial-gradient(circle at 30% 20%, oklch(0.70 0.19 47 / 0.20), transparent 60%),
|
|
radial-gradient(circle at 80% 80%, oklch(0.83 0.17 85 / 0.16), transparent 55%);
|
|
--gradient-primary: linear-gradient(135deg, oklch(0.83 0.17 85), oklch(0.70 0.19 47) 55%, oklch(0.62 0.20 40));
|
|
--shadow-soft: 0 1px 2px oklch(0.18 0.04 265 / 0.04), 0 4px 12px oklch(0.18 0.04 265 / 0.06);
|
|
--shadow-glow: 0 10px 40px -10px oklch(0.70 0.19 47 / 0.50);
|
|
}
|
|
|
|
.dark {
|
|
--background: oklch(0.18 0.04 265); /* #0F172A */
|
|
--foreground: oklch(0.96 0.01 247); /* #F1F5F9 */
|
|
--surface: oklch(0.25 0.04 260); /* #1E293B */
|
|
|
|
--card: oklch(0.25 0.04 260);
|
|
--card-foreground: oklch(0.96 0.01 247);
|
|
--popover: oklch(0.25 0.04 260);
|
|
--popover-foreground: oklch(0.96 0.01 247);
|
|
|
|
--primary: oklch(0.74 0.18 55); /* laranja mais claro p/ contraste no dark */
|
|
--primary-foreground: oklch(0.18 0.04 265);
|
|
--primary-dark: oklch(0.66 0.20 47);
|
|
--primary-light: oklch(0.82 0.15 65);
|
|
|
|
--secondary: oklch(0.85 0.16 88); /* amarelo */
|
|
--secondary-foreground: oklch(0.18 0.04 265);
|
|
|
|
--accent: oklch(0.80 0.17 72); /* âmbar */
|
|
--accent-foreground: oklch(0.18 0.04 265);
|
|
|
|
--muted: oklch(0.28 0.04 260);
|
|
--muted-foreground: oklch(0.65 0.03 256);
|
|
|
|
--destructive: oklch(0.63 0.23 25);
|
|
--destructive-foreground: oklch(0.99 0 0);
|
|
--success: oklch(0.72 0.17 162);
|
|
--success-foreground: oklch(0.18 0.04 265);
|
|
--warning: oklch(0.80 0.17 72);
|
|
--warning-foreground: oklch(0.18 0.04 265);
|
|
--info: oklch(0.68 0.17 255);
|
|
--info-foreground: oklch(0.18 0.04 265);
|
|
|
|
--border: oklch(0.32 0.03 256); /* #334155 */
|
|
--input: oklch(0.32 0.03 256);
|
|
--ring: oklch(0.74 0.18 55);
|
|
|
|
--chart-1: oklch(0.74 0.18 55);
|
|
--chart-2: oklch(0.85 0.16 88);
|
|
--chart-3: oklch(0.80 0.17 72);
|
|
--chart-4: oklch(0.66 0.20 47);
|
|
--chart-5: oklch(0.72 0.17 162);
|
|
|
|
--sidebar: oklch(0.22 0.04 262);
|
|
--sidebar-foreground: oklch(0.96 0.01 247);
|
|
--sidebar-primary: oklch(0.74 0.18 55);
|
|
--sidebar-primary-foreground: oklch(0.18 0.04 265);
|
|
--sidebar-accent: oklch(0.28 0.04 260);
|
|
--sidebar-accent-foreground: oklch(0.96 0.01 247);
|
|
--sidebar-border: oklch(0.32 0.03 256);
|
|
--sidebar-ring: oklch(0.74 0.18 55);
|
|
|
|
--gradient-hero: radial-gradient(circle at 30% 20%, oklch(0.74 0.18 55 / 0.28), transparent 60%),
|
|
radial-gradient(circle at 80% 80%, oklch(0.85 0.16 88 / 0.18), transparent 55%);
|
|
--gradient-primary: linear-gradient(135deg, oklch(0.85 0.16 88), oklch(0.74 0.18 55) 55%, oklch(0.66 0.20 47));
|
|
--shadow-soft: 0 1px 2px oklch(0 0 0 / 0.3), 0 8px 24px oklch(0 0 0 / 0.35);
|
|
--shadow-glow: 0 10px 40px -10px oklch(0.74 0.18 55 / 0.55);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
html {
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-background);
|
|
color: var(--color-foreground);
|
|
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
|
|
}
|
|
|
|
::selection {
|
|
background-color: oklch(0.62 0.19 277 / 0.25);
|
|
color: var(--color-foreground);
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.bg-gradient-hero {
|
|
background-image: var(--gradient-hero);
|
|
}
|
|
.bg-gradient-primary {
|
|
background-image: var(--gradient-primary);
|
|
}
|
|
.shadow-soft {
|
|
box-shadow: var(--shadow-soft);
|
|
}
|
|
.shadow-glow {
|
|
box-shadow: var(--shadow-glow);
|
|
}
|
|
.text-balance {
|
|
text-wrap: balance;
|
|
}
|
|
}
|