/* ===================================================================== * * K/20X · NICO — shared theme tokens (mirrors loyalty.k20x.com/_theme.css) * * System: default = DARK. Opt-in LIGHT via [data-theme="light"] on . * Persisted as localStorage key `k20x_theme` (value `light` enables * light). The init script sets the attribute before paint so * there is no flash. WCAG AA in both themes; honors reduced-motion. * * This is served PUBLIC (no auth) at GET /studio/_theme.css and linked by both * the studio canvas and the login page. It is the ONE source of design tokens. * ===================================================================== */ /* ---- fonts ---------------------------------------------------------- */ /* body = system stack; labels/logo = JetBrains Mono (loaded in each page head) */ /* ===================================================================== * * DARK (default) — :root * ===================================================================== */ :root{ /* accent (shared by both themes) */ --accent:#ff6b35; --accent-strong:#c2410c; --accent-glow:rgba(255,107,53,.10); --ring:rgba(255,107,53,.45); --grid-line:rgba(255,107,53,.06); /* dark surfaces / text */ --bg:#0b0b0c; --surface:#141418; --card:#16161c; --card-hover:#1c1c24; --border:rgba(255,255,255,.08); --text:#e7e7ec; --muted:#a8a8a8; --dim:#6b6b6b; --glow:rgba(74,144,164,.16); /* teal "rain" radial glow */ /* status — deuteranopia-safe, luminance-differentiated, ALWAYS paired with an icon/label, NEVER color alone */ --st-green:#15803d; --st-blue:#1d4ed8; --st-red:#b91c1c; --st-purple:#6d28d9; --st-cyan:#0e7490; /* palette accents (light-mode "Rainy Coffee" hues, defined in both for reuse) */ --coffee:#8b6f47; --rain:#4a90a4; --grey:#d4d4d4; /* typography stacks */ --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace; /* radii */ --r-input:6px; --r-card:13px; color-scheme:dark; } /* ===================================================================== * * LIGHT — [data-theme="light"] ("Rainy Coffee") * ===================================================================== */ [data-theme="light"]{ --bg:#fafafa; --surface:#ffffff; --card:#ffffff; --card-hover:#f1f1f1; --border:rgba(10,10,10,.18); --text:#0a0a0a; --muted:#4b4b4b; --dim:#6c6c6c; --glow:rgba(74,144,164,.12); /* accent + status carry over unchanged (AA-safe on both) */ color-scheme:light; } /* ===================================================================== * * BASE — body, background grid + glow * ===================================================================== */ *{box-sizing:border-box;} html,body{height:100%;} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; position:relative; } /* subtle background: orange grid lines + a teal "rain" radial glow. Pinned, non-interactive, behind everything. */ body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size:36px 36px; } body::after{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(900px 520px at 78% -8%, var(--glow), transparent 70%), radial-gradient(640px 420px at 8% 108%, var(--accent-glow), transparent 72%); } /* keep all real content above the bg layers */ body > *{position:relative; z-index:1;} /* ===================================================================== * * LOGO lockup — "K/20X" wordmark in JetBrains Mono with the orange accent * ===================================================================== */ .logo{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-weight:700; letter-spacing:1px; color:var(--text); white-space:nowrap; user-select:none; } .logo .dot{ width:11px; height:11px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-glow); flex:0 0 auto; } .logo .mark{font-size:13px;} .logo .mark b{color:var(--accent); font-weight:700;} /* the "/" + accent letters */ .logo .sep{color:var(--dim); font-weight:400; margin:0 1px;} .logo .product{color:var(--muted); font-weight:600; letter-spacing:2px; font-size:11px;} /* ===================================================================== * * TYPOGRAPHY helpers * ===================================================================== */ .title{font-size:15px; font-weight:600; margin:0; color:var(--text); font-family:var(--font-body);} .label{ font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:var(--muted); } /* ===================================================================== * * CARD * ===================================================================== */ .card{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); transition:border-color .12s ease, background-color .12s ease, transform .08s ease; } .card:hover{background:var(--card-hover);} /* ===================================================================== * * INPUT / SELECT / TEXTAREA * ===================================================================== */ .input, input.input, select.select, textarea.input{ width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-input); color:var(--text); padding:9px 11px; font-size:13px; font-family:var(--font-body); } .input::placeholder, textarea.input::placeholder{color:var(--dim);} .select.select{ -webkit-appearance:none; appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%), linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:30px; } /* ===================================================================== * * BUTTON * ===================================================================== */ .btn{ font-family:var(--font-body); font-size:13px; font-weight:600; border-radius:var(--r-input); padding:10px 16px; cursor:pointer; border:1px solid var(--border); background:var(--surface); color:var(--text); transition:border-color .12s ease, background-color .12s ease, color .12s ease; } .btn:hover{border-color:var(--accent);} .btn-primary{ background:var(--accent); border-color:var(--accent); color:#0b0b0c; font-weight:700; } .btn-primary:hover{background:var(--accent-strong); border-color:var(--accent-strong); color:#fff;} .btn:disabled{opacity:.4; cursor:not-allowed;} /* ===================================================================== * * PILL / chip / badge * ===================================================================== */ .pill{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10px; font-weight:600; letter-spacing:.3px; padding:5px 9px; border-radius:18px; border:1px solid var(--border); color:var(--muted); background:var(--surface); } .pill.on{color:#0b0b0c; background:var(--accent); border-color:var(--accent);} /* ===================================================================== * * FOCUS RING — visible, accent-colored, both themes (a11y) * ===================================================================== */ :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } a:focus-visible, button:focus-visible, .input:focus-visible, .select:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; box-shadow:0 0 0 3px var(--ring); } .input:focus, input:focus, select:focus, textarea:focus{ border-color:var(--accent); outline:none; } /* ===================================================================== * * THEME TOGGLE — sun/moon, 24px+ hit area (a11y) * ===================================================================== */ .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; min-width:34px; /* ≥24px hit area */ border:1px solid var(--border); border-radius:var(--r-input); background:var(--surface); color:var(--muted); cursor:pointer; font-size:16px; line-height:1; padding:0; transition:border-color .12s ease, color .12s ease; } .theme-toggle:hover{border-color:var(--accent); color:var(--text);} /* show the right glyph for the current theme: moon in dark (offer light), sun in light */ .theme-toggle .i-sun{display:none;} .theme-toggle .i-moon{display:inline;} [data-theme="light"] .theme-toggle .i-sun{display:inline;} [data-theme="light"] .theme-toggle .i-moon{display:none;} /* ===================================================================== * * REDUCED MOTION * ===================================================================== */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }