/* ============================================================ Agent C — Design System (PR 11.1) Per-user themable token layer + component primitives. Usage: ← server-rendered from User.theme_preference Six built-in themes (validated server-side in me_profile_module.ALLOWED_THEMES): apple-mov ← default, light + purple accent apple-negru ← dark + purple accent ocean-blue ← light + blue accent forest-green ← light + green accent sunset-coral ← light + coral accent dark-mov ← deep dark + violet accent PR 11.2/11.3/11.4 will progressively tokenize the rest of the app. PR 11.1 only ships the tokens + components + applies them on /me/profile. ============================================================ */ /* ---- Typography + radius base (theme-independent) ---- */ :root { --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif; --font-mono: "SF Mono", "JetBrains Mono", Consolas, Menlo, monospace; --font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 13px; --font-size-md: 14px; --font-size-lg: 17px; --font-size-xl: 20px; --font-size-2xl: 24px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 4px 12px rgba(0,0,0,0.06); --border-hairline: 0.5px; --transition-base: 120ms ease; } /* ============================================================ Theme 1 — Apple Mov (default, light + purple accent) ============================================================ */ [data-theme="apple-mov"] { --color-bg: #ffffff; --color-bg-elevated: #f7f7f9; --color-bg-secondary: #f2f2f4; --color-surface: #ffffff; --color-border: rgba(0, 0, 0, 0.08); --color-border-strong: rgba(0, 0, 0, 0.16); --color-text: #1d1d1f; --color-text-secondary: #6e6e73; --color-text-tertiary: #8e8e93; --color-text-inverse: #ffffff; --color-accent: #635bff; --color-accent-hover: #5048e5; --color-accent-soft: rgba(99, 91, 255, 0.10); --color-accent-contrast: #ffffff; --color-success: #34c759; --color-warning: #ff9f0a; --color-danger: #ff3b30; --color-info: #5ac8fa; } /* ============================================================ Theme 2 — Apple Negru (dark + purple accent) ============================================================ */ [data-theme="apple-negru"] { --color-bg: #000000; --color-bg-elevated: #1c1c1e; --color-bg-secondary: #2c2c2e; --color-surface: #1c1c1e; --color-border: rgba(255, 255, 255, 0.10); --color-border-strong: rgba(255, 255, 255, 0.20); --color-text: #f5f5f7; --color-text-secondary: #aeaeb2; --color-text-tertiary: #8e8e93; --color-text-inverse: #000000; --color-accent: #7c75ff; --color-accent-hover: #948dff; --color-accent-soft: rgba(124, 117, 255, 0.16); --color-accent-contrast: #ffffff; --color-success: #30d158; --color-warning: #ff9f0a; --color-danger: #ff453a; --color-info: #64d2ff; } /* ============================================================ Theme 3 — Ocean Blue (light + blue accent) ============================================================ */ [data-theme="ocean-blue"] { --color-bg: #f5f9fc; --color-bg-elevated: #ffffff; --color-bg-secondary: #eaf2f9; --color-surface: #ffffff; --color-border: rgba(10, 60, 120, 0.10); --color-border-strong: rgba(10, 60, 120, 0.20); --color-text: #0b2a4a; --color-text-secondary: #4a6a8a; --color-text-tertiary: #7a8fa8; --color-text-inverse: #ffffff; --color-accent: #007aff; --color-accent-hover: #0064d6; --color-accent-soft: rgba(0, 122, 255, 0.10); --color-accent-contrast: #ffffff; --color-success: #34c759; --color-warning: #ff9f0a; --color-danger: #ff3b30; --color-info: #5ac8fa; } /* ============================================================ Theme 4 — Forest Green (light + green accent) ============================================================ */ [data-theme="forest-green"] { --color-bg: #f6faf6; --color-bg-elevated: #ffffff; --color-bg-secondary: #eaf3ea; --color-surface: #ffffff; --color-border: rgba(20, 60, 30, 0.10); --color-border-strong: rgba(20, 60, 30, 0.20); --color-text: #1a3a22; --color-text-secondary: #4a6a52; --color-text-tertiary: #7a8f82; --color-text-inverse: #ffffff; --color-accent: #2e8b3e; --color-accent-hover: #246e31; --color-accent-soft: rgba(46, 139, 62, 0.10); --color-accent-contrast: #ffffff; --color-success: #34c759; --color-warning: #ff9f0a; --color-danger: #ff3b30; --color-info: #5ac8fa; } /* ============================================================ Theme 5 — Sunset Coral (light + coral accent) ============================================================ */ [data-theme="sunset-coral"] { --color-bg: #fef8f6; --color-bg-elevated: #ffffff; --color-bg-secondary: #fbeae3; --color-surface: #ffffff; --color-border: rgba(120, 40, 20, 0.10); --color-border-strong: rgba(120, 40, 20, 0.20); --color-text: #3a1a10; --color-text-secondary: #6a4438; --color-text-tertiary: #8f7068; --color-text-inverse: #ffffff; --color-accent: #ff6b5a; --color-accent-hover: #e8543f; --color-accent-soft: rgba(255, 107, 90, 0.12); --color-accent-contrast: #ffffff; --color-success: #34c759; --color-warning: #ff9f0a; --color-danger: #ff3b30; --color-info: #5ac8fa; } /* ============================================================ Theme 6 — Dark Mov (deep dark + violet accent) ============================================================ */ [data-theme="dark-mov"] { --color-bg: #0e0a1a; --color-bg-elevated: #1a142e; --color-bg-secondary: #241a3e; --color-surface: #1a142e; --color-border: rgba(180, 160, 255, 0.10); --color-border-strong: rgba(180, 160, 255, 0.20); --color-text: #ede7ff; --color-text-secondary: #b8aee0; --color-text-tertiary: #8a82b0; --color-text-inverse: #0e0a1a; --color-accent: #a78bfa; --color-accent-hover: #b9a3ff; --color-accent-soft: rgba(167, 139, 250, 0.18); --color-accent-contrast: #1a0a2e; --color-success: #30d158; --color-warning: #ffb340; --color-danger: #ff5a4f; --color-info: #6ad7ff; } /* ============================================================ PR 11.2 — PWA-dark mode (separate visual aesthetic) Applied via html[data-pwa="dark"] alongside the user's data-theme. Overrides background/text/border/accent tokens with the existing PWA palette (#0a0e1a bg, #00c9a7 mint accent) so workers see a consistent dark UI regardless of the theme they pick for the Agent C web side. --color-success and --color-info are explicitly pinned here to keep PWA visual identity. --color-danger and --color-warning continue to inherit from the active [data-theme="..."] block — their per-theme variation is subtle and acceptable. Source order matters: this block sits AFTER the 6 data-theme blocks so it wins specificity ties (both selectors are single attribute selectors with equal specificity; last one in source order applies). ============================================================ */ html[data-pwa="dark"] { --color-bg: #0a0e1a; --color-bg-elevated: #161b22; --color-bg-secondary: #0d1117; --color-surface: #161b22; --color-border: rgba(255, 255, 255, 0.1); --color-border-strong: rgba(255, 255, 255, 0.2); --color-text: #e8eef7; --color-text-secondary: #8a96b0; --color-text-tertiary: rgba(232, 238, 247, 0.5); --color-accent: #00c9a7; --color-accent-hover: #00b899; --color-accent-soft: rgba(0, 201, 167, 0.12); --color-accent-contrast: #002b25; /* Pinned for PWA visual identity (do not inherit from active theme). */ --color-success: #00c9a7; --color-info: #58a6ff; } /* ============================================================ Component primitives Use these classes to opt INTO the design system. Existing inline styles continue to override — that is intentional for PR 11.1. ============================================================ */ /* ---- Buttons ---- */ .btn-primary, .btn-secondary, .btn-accent-outline, .btn-disabled { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px 18px; border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--font-size-md); font-weight: 500; line-height: 1.2; text-decoration: none; cursor: pointer; border: var(--border-hairline) solid transparent; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-base); -webkit-tap-highlight-color: transparent; } .btn-primary { background: var(--color-accent); color: var(--color-accent-contrast); } .btn-primary:hover { background: var(--color-accent-hover); } .btn-primary:active { transform: scale(0.98); } .btn-secondary { background: var(--color-bg-secondary); color: var(--color-text); border-color: var(--color-border); } .btn-secondary:hover { background: var(--color-bg-elevated); border-color: var(--color-border-strong); } .btn-accent-outline { background: transparent; color: var(--color-accent); border-color: var(--color-accent); } .btn-accent-outline:hover { background: var(--color-accent-soft); } .btn-disabled { background: var(--color-bg-secondary); color: var(--color-text-tertiary); cursor: not-allowed; pointer-events: none; opacity: 0.6; } /* ---- Cards ---- */ .card { background: var(--color-surface); border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); color: var(--color-text); } .card-secondary { background: var(--color-bg-secondary); border-radius: var(--radius-md); padding: var(--space-4); color: var(--color-text); } /* ---- Form inputs ---- */ .input { width: 100%; padding: 10px 14px; background: var(--color-bg-elevated); border: var(--border-hairline) solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--font-size-md); color: var(--color-text); transition: border-color var(--transition-base), background var(--transition-base); } .input:focus { outline: none; border-color: var(--color-accent); background: var(--color-surface); } .input::placeholder { color: var(--color-text-tertiary); } /* ---- Badges ---- */ .badge-success, .badge-warning, .badge-danger, .badge-accent { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: 600; line-height: 1.4; letter-spacing: 0.02em; } .badge-success { background: rgba(52, 199, 89, 0.14); color: var(--color-success); } .badge-warning { background: rgba(255, 159, 10, 0.14); color: var(--color-warning); } .badge-danger { background: rgba(255, 59, 48, 0.14); color: var(--color-danger); } .badge-accent { background: var(--color-accent-soft); color: var(--color-accent); } /* ---- Meta labels + dots ---- */ .meta-label { font-size: var(--font-size-xs); font-weight: 500; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; } .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-tertiary); } .dot.dot-success { background: var(--color-success); } .dot.dot-warning { background: var(--color-warning); } .dot.dot-danger { background: var(--color-danger); } .dot.dot-accent { background: var(--color-accent); } /* ---- Segmented progress bar ---- */ .progress-segmented { display: flex; gap: 3px; height: 6px; width: 100%; } .progress-segmented > span { flex: 1; background: var(--color-bg-secondary); border-radius: 2px; } .progress-segmented > span.filled { background: var(--color-accent); } /* ============================================================ Theme switcher widget (used on /me/profile) ============================================================ */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: var(--space-3); margin-top: var(--space-2); } .theme-swatch { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-md); border: var(--border-hairline) solid var(--color-border); background: var(--swatch, var(--color-accent)); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 16px; font-weight: 700; line-height: 1; transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); -webkit-tap-highlight-color: transparent; } .theme-swatch:hover { transform: scale(1.04); border-color: var(--color-border-strong); } .theme-swatch.selected { border-color: var(--color-text); box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-text); } .theme-swatch:not(.selected) .theme-swatch-check { display: none; } .theme-swatch-check { text-shadow: 0 1px 2px rgba(0,0,0,0.4); }