/** * 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; }