:root { --global-body-background: #ffffff; --global-margin: 10px; --global-padding: 10px; --global-gap: 10px; --global-border-radius: 10px; --global-error-color: #e74c3c; --global-error-color-rgb: 231, 76, 60; --global-success-color: #2e7dcc; --global-success-color-rgb: 46, 125, 204; --global-primary-color: #4F7BFF; --global-primary-color-rgb: 79, 123, 255; --global-primary-hover: #3C6AF0; --global-button-radius: 25px; --global-button-background-color: #2b2b2b; --global-button-text-color: #f5f3f0; --global-input-radius: 25px; --global-background-color: #f5f3f0; --global-background-color-rgb: 245, 243, 240; --global-text-color: #2b2b2b; --global-text-color-rgb: 43, 43, 43; --global-text-muted: #6b7280; --global-footer-background-color: #efefef; --global-card-background: #ffffff; --global-border-color: #e5e5e5; --global-hover-color: #f5f5f5; --header-background-color: rgba(255, 255, 255, 0.7); --header-height: 55px; --header-max-width: 1024px; --footer-height: 130px; --studio-sidebar-width: 250px; --studio-project-background: #ffffff; --studio-sidebar-item-background: #fafafa; /* Badge Colors */ --badge-private-color: rgba(100, 116, 139, 0.85); --badge-space-color: rgba(139, 92, 246, 0.9); --badge-team-color: rgba(59, 130, 246, 0.9); --badge-link-color: rgba(168, 85, 247, 0.9); --badge-public-color: rgba(34, 197, 94, 0.9); --badge-edit-default-color: rgba(251, 146, 60, 0.9); /* ===================================================================== * Brand iridescent palette — v4 jewel-tone (refined) * --------------------------------------------------------------------- * Per DESIGN.md §2.4. Saturation drops; depth rises. The palette no * longer reads as candy — it reads as the color of a material: * gem facet light, aurora through fog, late-afternoon sun on antique * brass. Iris + lichen anchor the cool pole; mulberry + brass anchor * the warm pole; all four share the same dusty saturation register. * * The canonical v4 names are `--brand-iris/mulberry/brass/lichen`. * The earlier v3 names (`--brand-violet/rose/cognac/teal`) are kept * as aliases so existing call sites continue to render — but they * now resolve to the v4 jewel-tone values. New code SHOULD use the * v4 names; a future rename pass can retire the v3 aliases. * ===================================================================== */ --brand-iris: #6750D8; --brand-iris-rgb: 103, 80, 216; --brand-mulberry: #C76B86; --brand-mulberry-rgb: 199, 107, 134; --brand-brass: #C99464; --brand-brass-rgb: 201, 148, 100; --brand-lichen: #7AA39A; --brand-lichen-rgb: 122, 163, 154; /* v3 aliases — same values as v4 above. Do not introduce in new code. */ --brand-violet: var(--brand-iris); --brand-violet-rgb: var(--brand-iris-rgb); --brand-rose: var(--brand-mulberry); --brand-rose-rgb: var(--brand-mulberry-rgb); --brand-cognac: var(--brand-brass); --brand-cognac-rgb: var(--brand-brass-rgb); --brand-teal: var(--brand-lichen); --brand-teal-rgb: var(--brand-lichen-rgb); /* Studio CTA gradient — v4 jewel-tone 5-stop (per DESIGN.md §2.4). Used by the Studio entry button, the iridescent button variant, editor save CTA and the studio sidebar accent. Always paired with `brand-iridescent-shift 20s ease infinite` so the gem facets drift. Stops sit ~one tone above the base palette so the CTA reads as luminous against header / page chrome without sliding into candy. */ --brand-iridescent-gradient: linear-gradient(135deg, #F495B2 0%, #F2B58A 25%, #F4C283 50%, #A0CDEC 80%, #4030E0 100%); /* ===================================================================== * Interaction state tokens — v3 (NEUTRAL on purpose) * --------------------------------------------------------------------- * Solo-violet hover/focus/active reads as a brand-loud accent that * fights with the iridescent palette (which only earns its identity * when all four stops sit together). Interaction states are therefore * authored as text-color tints — quiet, monochrome, theme-aware. * Brand color is reserved for *ambient* treatments (radial blooms, * the iridescent gradient, ground shadows under cards), never as a * solo accent on a hover/focus boundary. * ===================================================================== */ --focus-ring-color: rgba(0, 0, 0, 0.14); /* 3px outer ring on inputs */ --focus-border-color: rgba(0, 0, 0, 0.55); /* 1px inner border on focus */ --focus-outline-color: rgba(0, 0, 0, 0.55); /* outline: 2px on chips/buttons */ --state-hover-bg: rgba(0, 0, 0, 0.04); /* subtle hover surface fill */ --state-active-bg: rgba(0, 0, 0, 0.08); /* subtle active/selected fill */ --state-selected-bg: rgba(0, 0, 0, 0.06); /* tabs / list items */ } /* Dark Mode - VSCode inspired */ @media (prefers-color-scheme: dark) { :root { --global-body-background: #1e1e1e; --global-error-color: #f14c4c; --global-error-color-rgb: 241, 76, 76; --global-success-color: #3794ff; --global-success-color-rgb: 55, 148, 255; --global-primary-color: #3794ff; --global-primary-color-rgb: 55, 148, 255; --global-primary-hover: #2980e8; --global-button-background-color: #e0e0e0; --global-button-text-color: #1e1e1e; --global-background-color: #252526; --global-background-color-rgb: 37, 37, 38; --global-text-color: #cccccc; --global-text-color-rgb: 204, 204, 204; --global-text-muted: #9ca3af; --global-footer-background-color: #333333; --global-card-background: #1e1e1e; --global-border-color: #3c3c3c; --global-hover-color: #3c3c3c; --header-background-color: rgba(30, 30, 30, 0.9); --studio-project-background: #2d2d2d; --studio-sidebar-item-background: #3c3c3c; /* Badge Colors - Dark Mode */ --badge-private-color: rgba(120, 120, 130, 0.95); --badge-space-color: rgba(139, 92, 246, 0.95); --badge-team-color: rgba(59, 130, 246, 0.95); --badge-link-color: rgba(168, 85, 247, 0.95); --badge-public-color: rgba(34, 197, 94, 0.95); --badge-edit-default-color: rgba(251, 146, 60, 0.95); /* Interaction state tokens — neutral text-color tints (dark) */ --focus-ring-color: rgba(255, 255, 255, 0.16); --focus-border-color: rgba(255, 255, 255, 0.55); --focus-outline-color: rgba(255, 255, 255, 0.55); --state-hover-bg: rgba(255, 255, 255, 0.06); --state-active-bg: rgba(255, 255, 255, 0.10); --state-selected-bg: rgba(255, 255, 255, 0.08); } }