/** * GridPilot design tokens — mirrored from x.ai/api (light product surface). * Change these variables to restyle the whole product. * Toggle dark with . */ :root { --gp-canvas: #ffffff; --gp-canvas-soft: #fafafa; --gp-ink: #0a0a0a; --gp-ink-muted: #737373; --gp-ink-faint: #a3a3a3; --gp-border: #e5e5e5; --gp-border-strong: #d4d4d4; --gp-surface: #ffffff; --gp-surface-2: #f5f5f5; --gp-primary: #0a0a0a; --gp-primary-fg: #ffffff; --gp-focus: #2563eb; --gp-danger: #dc2626; --gp-danger-soft: #fef2f2; --gp-warn: #b45309; --gp-warn-soft: #fffbeb; --gp-ok: #15803d; --gp-ok-soft: #f0fdf4; --gp-info-soft: #eff6ff; --gp-radius-pill: 9999px; --gp-radius-card: 16px; --gp-radius-input: 12px; --gp-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --gp-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --gp-max: 1120px; } [data-theme="dark"] { --gp-canvas: #0c0c0b; --gp-canvas-soft: #141619; --gp-ink: #ffffff; --gp-ink-muted: #7d8187; --gp-ink-faint: #474747; --gp-border: #1f2228; --gp-border-strong: #2a2e36; --gp-surface: #141619; --gp-surface-2: #1f2228; --gp-primary: #ffffff; --gp-primary-fg: #0c0c0b; --gp-focus: #2563eb; --gp-danger: #f87171; --gp-danger-soft: #3f1d1d; --gp-warn: #fbbf24; --gp-warn-soft: #3b2f14; --gp-ok: #4ade80; --gp-ok-soft: #14532d; --gp-info-soft: #1e293b; } html, body { background: var(--gp-canvas); color: var(--gp-ink); font-family: var(--gp-font-sans); letter-spacing: -0.011em; } /* Accent panel like x.ai code hero */ .gp-accent-panel { background: radial-gradient(120% 90% at 80% 20%, rgba(99, 102, 241, 0.35), transparent 55%), radial-gradient(90% 80% at 10% 90%, rgba(56, 189, 248, 0.28), transparent 50%), linear-gradient(145deg, #1e3a5f 0%, #3b82f6 45%, #93c5fd 100%); } @keyframes gp-spin { to { transform: rotate(360deg); } } .gp-spin { animation: gp-spin 0.8s linear infinite; } @keyframes gp-progress { from { width: 8%; } to { width: 92%; } } .gp-audit-progress { height: 3px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--focus, #3b82f6) 18%, transparent); } .gp-audit-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--focus, #3b82f6); animation: gp-progress 3s ease-in-out forwards; } @keyframes gp-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes gp-fade-in { from { opacity: 0; } to { opacity: 1; } } .gp-drawer-panel { animation: gp-drawer-in 0.28s cubic-bezier(0.32, 0.72, 0.24, 1) both; } .gp-drawer-backdrop { animation: gp-fade-in 0.2s ease-out both; } .gp-drawer-panel.closing { animation: gp-drawer-in 0.2s cubic-bezier(0.32, 0.72, 0.24, 1) reverse both; } .gp-drawer-backdrop.closing { animation: gp-fade-in 0.2s ease-out reverse both; }