/* ========================================================================== Chat Z — Design Tokens Linguagem "violet obsidian": superfícies quase-pretas com subtom violeta, acento lavanda-plasma. Profundidade por luz, não por sombra. Dark-first. Toda a identidade vive aqui; app.css só consome tokens. ========================================================================== */ :root { color-scheme: dark; /* ---- Surfaces (obsidiana violeta, elevação por luminância) ---- */ --bg: oklch(0.125 0.012 290); --bg-0: oklch(0.125 0.012 290 / 0); --glass: oklch(0.115 0.012 290 / 0.72); --bg-subtle: oklch(0.1 0.012 290); --surface: oklch(0.16 0.014 290); --surface-hover: oklch(0.2 0.016 290); --surface-over: oklch(0.18 0.015 290); --surface-glass: oklch(0.16 0.014 290 / 0.82); /* ---- Borders (hairline: luz sobre o escuro) ---- */ --border-subtle: oklch(1 0 0 / 0.055); --border: oklch(1 0 0 / 0.09); --border-strong: oklch(1 0 0 / 0.17); /* ---- Text ---- */ --text: oklch(0.96 0.004 290); --text-muted: oklch(0.76 0.012 292); --text-subtle: oklch(0.6 0.014 292); --text-disabled: oklch(0.45 0.012 292); /* ---- Accent: lavanda-plasma (hue 295) ---- */ --accent: oklch(0.72 0.18 295); --accent-hover: oklch(0.78 0.16 297); --accent-active: oklch(0.66 0.19 293); --accent-soft: oklch(0.62 0.2 288); --accent-fg: oklch(0.14 0.02 290); --accent-subtle: oklch(0.72 0.18 295 / 0.16); --accent-faint: oklch(0.72 0.18 295 / 0.08); --accent-ring: oklch(0.72 0.18 295 / 0.5); --accent-glow: oklch(0.72 0.18 295 / 0.42); /* ---- Semantic ---- */ --success: oklch(0.78 0.15 165); --warning: oklch(0.83 0.16 84); --danger: oklch(0.66 0.21 25); --info: oklch(0.72 0.13 240); /* ---- Gradientes (assinatura plasma) ---- */ --gradient-ember: linear-gradient(135deg, oklch(0.8 0.16 300), oklch(0.6 0.22 287)); --gradient-obsidian: linear-gradient(180deg, oklch(0.155 0.015 290), oklch(0.08 0.01 290)); --gradient-sheen: linear-gradient(180deg, oklch(1 0 0 / 0.06), oklch(1 0 0 / 0)); --gradient-ambient: radial-gradient(1200px 700px at 15% -12%, oklch(0.6 0.22 300 / 0.16), transparent 60%), radial-gradient(900px 620px at 108% 14%, oklch(0.5 0.25 285 / 0.13), transparent 60%), radial-gradient(760px 520px at 52% 118%, oklch(0.45 0.18 275 / 0.1), transparent 62%); /* ---- Typography ---- */ --font-sans: "Work Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace; --font-display: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --text-xs: 0.75rem; /* 12 — timestamps, labels caps */ --text-sm: 0.875rem; /* 14 — UI, sidebar, botões */ --text-base: 1rem; /* 16 — corpo das mensagens */ --text-lg: 1.25rem; /* 20 — lead */ --text-xl: 1.563rem; /* 25 — h3 */ --text-2xl: 1.953rem; /* 31 — h2 */ --text-display: clamp(2.25rem, 1.4rem + 3.4vw, 3.4rem); --leading-tight: 1.1; --leading-snug: 1.3; --leading-body: 1.6; --tracking-tight: -0.011em; --tracking-tighter: -0.02em; --tracking-caps: 0.07em; /* ---- Spacing (base-4) ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; /* ---- Radii ---- */ --r-4: 6px; --r-8: 0.6875rem; --r-12: 0.9375rem; --r-16: 1.25rem; --r-full: 9999px; /* ---- Elevação (dark = luz, não sombra) ---- */ --sheen: inset 0 1px 0 oklch(1 0 0 / 0.06); --shadow-lift: inset 0 1px 0 oklch(1 0 0 / 0.06), 0 30px 80px -34px oklch(0 0 0 / 0.72); --shadow-ember: 0 0 0 1px oklch(0.72 0.18 295 / 0.4), 0 30px 100px -22px oklch(0.72 0.18 295 / 0.35); --shadow-overlay: 0 0 0 1px oklch(1 0 0 / 0.06), 0 30px 84px -26px oklch(0 0 0 / 0.86); --shadow-menu: 0 0 0 1px oklch(1 0 0 / 0.055), 0 16px 42px -16px oklch(0 0 0 / 0.78); --shadow-composer: 0 22px 56px -32px oklch(0 0 0 / 0.92), inset 0 1px 0 oklch(1 0 0 / 0.06); --send-glow: inset 0 1px 0 oklch(1 0 0 / 0.22), 0 0 26px -6px var(--accent-glow); /* ---- Motion ---- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quart: cubic-bezier(0.22, 1, 0.36, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --t-fast: 120ms; --t-med: 200ms; --t-slow: 300ms; /* ---- Layout ---- */ --sidebar-w: 286px; --measure: 72ch; --composer-max: 50rem; --thread-max: 50rem; } /* ========================================================================== LIGHT — recalculado (não invertido): papel frio, sombras tingidas ========================================================================== */ :root[data-theme="light"] { color-scheme: light; --bg: oklch(0.985 0.004 290); --bg-0: oklch(0.985 0.004 290 / 0); --glass: oklch(0.985 0.004 290 / 0.72); --bg-subtle: oklch(0.965 0.006 290); --surface: oklch(1 0 0); --surface-hover: oklch(0.955 0.008 290); --surface-over: oklch(1 0 0); --surface-glass: oklch(1 0 0 / 0.85); --border-subtle: oklch(0.915 0.006 290); --border: oklch(0.88 0.01 290); --border-strong: oklch(0.78 0.012 290); --text: oklch(0.19 0.02 290); --text-muted: oklch(0.46 0.018 290); --text-subtle: oklch(0.56 0.016 290); --text-disabled: oklch(0.72 0.012 290); --accent: oklch(0.55 0.24 293); --accent-hover: oklch(0.49 0.24 291); --accent-active: oklch(0.44 0.22 289); --accent-soft: oklch(0.66 0.2 296); --accent-fg: oklch(0.99 0.005 290); --accent-subtle: oklch(0.55 0.24 293 / 0.12); --accent-faint: oklch(0.55 0.24 293 / 0.055); --accent-ring: oklch(0.55 0.24 293 / 0.38); --accent-glow: oklch(0.55 0.24 293 / 0.28); --success: oklch(0.6 0.13 163); --warning: oklch(0.67 0.16 58); --danger: oklch(0.58 0.22 27); --info: oklch(0.59 0.14 242); --gradient-ember: linear-gradient(135deg, oklch(0.6 0.22 297), oklch(0.47 0.24 285)); --gradient-obsidian: linear-gradient(180deg, oklch(0.155 0.015 290), oklch(0.085 0.012 290)); --gradient-sheen: linear-gradient(180deg, oklch(1 0 0 / 0.7), oklch(1 0 0 / 0)); --gradient-ambient: radial-gradient(1200px 620px at 18% -10%, oklch(0.55 0.24 295 / 0.1), transparent 58%), radial-gradient(900px 520px at 110% 8%, oklch(0.5 0.22 282 / 0.07), transparent 60%); --sheen: inset 0 1px 0 oklch(1 0 0 / 0.8); --shadow-lift: inset 0 1px 0 oklch(1 0 0 / 0.9), 0 20px 48px -22px oklch(0.3 0.04 290 / 0.2); --shadow-ember: 0 0 0 1px oklch(0.55 0.24 293 / 0.3), 0 24px 70px -22px oklch(0.55 0.24 293 / 0.3); --shadow-overlay: 0 0 0 1px oklch(0.3 0.03 290 / 0.06), 0 4px 6px -4px oklch(0.3 0.03 290 / 0.1), 0 18px 40px -10px oklch(0.3 0.03 290 / 0.16); --shadow-menu: 0 0 0 1px oklch(0.3 0.03 290 / 0.05), 0 2px 4px -2px oklch(0.3 0.03 290 / 0.08), 0 12px 24px -6px oklch(0.3 0.03 290 / 0.12); --shadow-composer: 0 14px 38px -24px oklch(0.3 0.03 290 / 0.3), inset 0 1px 0 oklch(1 0 0 / 0.9); --send-glow: 0 1px 2px oklch(0.3 0.03 290 / 0.2), 0 0 20px -6px var(--accent-glow); }