/* Theme tokens and dark mode overrides */ /* Light (default) theme tokens */ :root { color-scheme: light; /* allow form controls to adapt */ /* Core background & surface */ --color-bg: #F6F6F6; --color-bg-alt: #FBFBFB; --color-bg-message: #EEE; --color-bg-avatar: #1E1E1E; --color-surface: #FFFFFF; --color-surface-alt: #F2F2F2; --color-elevated: #FFFFFF; --color-surface-translucent: rgba(255, 255, 255, 0.8); /* Borders & separators */ --color-border: #D9D9D9; --color-border-strong: #B5B5B5; /* Text */ --color-text: #1E1E1E; --color-text-muted: #666666; --color-text-inverse: #FFFFFF; --color-input-placeholder: #5B5B5B; /* Accents / interactive */ --color-accent: #3282FF; --color-accent-rgb: 50 130 255; --color-accent-hover: #2569D2; /* Foreground accent — the accent as TEXT and stateful-toggle ICON colour (links, the Snap-to-Object toggle, etc.), as opposed to accent fills and borders which keep --color-accent. Blue in light; see the dark override for why it diverges there. */ --color-accent-fg: #3282FF; /* The app's one amber: the Image Detail modal's subject box and info-section labels, and the dark-theme foreground accent below both reference this, so the two never drift into separate ambers. */ --color-amber: #ffcc38; /* Hover for foreground-accent links: the fg accent shifted toward the theme text colour, staying the same hue and readable in both themes. Resolves per-theme via the tokens it references, so one definition serves both. */ --color-accent-fg-hover: color-mix(in srgb, var(--color-accent-fg) 80%, var(--color-text) 20%); /* Danger / destructive: cherry red, not coral. Used as a solid fill in some contexts (text, borders) and as a gradient on primary destructive buttons (`.btn-delete`). */ --color-danger: #C8102E; --color-danger-rgb: 200 16 46; --color-danger-hover: #8B0020; --color-danger-gradient-start: #C8102E; --color-danger-gradient-end: #8B0020; --gradient-cherry-red: linear-gradient(180deg, #C8102E 0%, #8B0020 100%); --color-warning: #f39c12; --color-success: #2ecc71; --color-success-soft: #dfeee5; --color-text-on-gradient: #FFFFFF; --color-gradient-start: #3282FF; --color-gradient-end: #1C54AB; /* Named gradients */ --gradient-bright-blue: linear-gradient(180deg, #3282FF 0%, #1C54AB 100%); --gradient-medium-blue: linear-gradient(180deg, #2569D2 0%, #113B80 100%); --color-overlay: rgba(0, 0, 0, 0.25); --color-overlay-inverse: rgba(255, 255, 255, 0.8); /* Header honeycomb texture (site_base.html / .app-header-texture): two stroke layers over the header background. Deliberately very low contrast so the texture never competes with the logo or header buttons. The header and side rail get their own background tokens so they can sit a shade apart from --color-surface / --color-bg-alt without moving every other surface. Light mode: a very light gray that the header fades left-to-right to white (--color-surface); the side rail holds the gray flat. */ --color-header-bg: #F1F1F1; --color-side-rail-bg: #F5F5F5; --color-header-texture-major: rgba(30, 30, 30, 0.08); --color-header-texture-minor: rgba(30, 30, 30, 0.048); /* Controls */ --color-button-primary-bg: #1E1E1E; --color-button-primary-hover: #000000; --color-button-primary-text: #FFFFFF; --color-button-ghost-bg: transparent; --color-button-ghost-border: #D9D9D9; --color-button-ghost-hover-bg: #F2F2F2; --color-button-ghost-text: #1E1E1E; --color-button-disabled-bg: #E0E0E0; --color-button-disabled-border: #E0E0E0; --color-button-disabled-text: #9E9E9E; --color-control-neutral-bg: #616161; --color-control-neutral-hover: #4a4a4a; --color-control-neutral-text: #FFFFFF; --color-control-inverse-bg: #D9D9D9; /* Shadows */ --shadow-color-rgb: 0 0 0; --shadow-soft: 0 5px 15px rgba(var(--shadow-color-rgb) / 0.10); --shadow-hard: 0 8px 30px rgba(var(--shadow-color-rgb) / 0.20); /* Focus */ --color-focus-ring: var(--color-gradient-start); /* Legacy variable aliases (so existing CSS continues to work) */ --primary-color: var(--color-text); --secondary-color: #2c3e50; --active-color: var(--color-accent); --accent-color: var(--color-danger); --light-color: var(--color-bg-alt); --dark-color: var(--color-text); } /* Dark theme overrides */ html.theme-dark { color-scheme: dark; --color-bg: #383838; /* window background from Figma */ --color-bg-alt: #2E2E2E; --color-bg-message: #383838; --color-bg-avatar: #EEE; /* header / side rail backing */ --color-surface: #2E2E2E; --color-surface-alt: #444444; --color-elevated: #3A3A3A; --color-surface-translucent: rgba(46, 46, 46, 0.8); --color-border: #101010; /* stroke from Figma */ --color-border-strong: #1A1A1A; --color-text: #F2F2F2; --color-text-muted: #C0C0C0; --color-text-inverse: #1E1E1E; --color-input-placeholder: #B2B2B2; /* Dark accent deliberately matches the light accent (#3282FF) rather than lightening to #4DA3FF: that lighter blue is not used anywhere in the app. Hover darkens to #2569D2 (the light-theme hover) so an accent element never lightens back toward the retired blue on interaction. */ --color-accent: #3282FF; --color-accent-rgb: 50 130 255; --color-accent-hover: #2569D2; /* Foreground accent, dark theme. The accent blue (#3282FF) is only ~3.2:1 against the dark surfaces, so accent-coloured text and stateful-toggle icons drop below the 4.5:1 readability floor. The shared amber reads at ~6.5-9:1 there. Accent FILLS keep the blue (--color-accent); only foreground (text/icons) switches to the amber here. */ --color-accent-fg: var(--color-amber); /* Cherry red, dark theme. Slightly brighter starting stop so it reads against the dark surface; same gradient ratio as light. */ --color-danger: #DA1F47; --color-danger-rgb: 218 31 71; --color-danger-hover: #A00026; --color-danger-gradient-start: #DA1F47; --color-danger-gradient-end: #A00026; --gradient-cherry-red: linear-gradient(180deg, #DA1F47 0%, #A00026 100%); --color-warning: #ffb347; --color-success: #41d482; --color-success-soft: rgba(65, 212, 130, 0.18); --color-text-on-gradient: #FFFFFF; --color-overlay: rgba(0, 0, 0, 0.35); --color-overlay-inverse: rgba(56, 56, 56, 0.85); /* Header honeycomb texture, dark: light strokes over a header background a shade darker than --color-surface so the pattern reads slightly brighter against it. The side rail keeps its normal --color-bg-alt. */ --color-header-bg: #242424; --color-side-rail-bg: var(--color-bg-alt); --color-header-texture-major: rgba(255, 255, 255, 0.07); --color-header-texture-minor: rgba(255, 255, 255, 0.038); --color-button-primary-bg: #F2F2F2; --color-button-primary-hover: #E1E1E1; --color-button-primary-text: #1E1E1E; --color-button-ghost-bg: transparent; /* Lighter than the elevated dialog surface (#3A3A3A) so the border on Cancel-style buttons reads against the dialog. */ --color-button-ghost-border: #5C5C5C; --color-button-ghost-hover-bg: #444444; --color-button-ghost-text: #F2F2F2; --color-button-disabled-bg: #3A3A3A; --color-button-disabled-border: #3A3A3A; --color-button-disabled-text: #777777; --color-control-neutral-bg: #4A4A4A; --color-control-neutral-hover: #5A5A5A; --color-control-neutral-text: #F2F2F2; --color-control-inverse-bg: #EDEDED; --shadow-color-rgb: 0 0 0; --shadow-soft: 0 5px 15px rgba(var(--shadow-color-rgb) / 0.40); --shadow-hard: 0 8px 30px rgba(var(--shadow-color-rgb) / 0.60); --color-focus-ring: var(--color-gradient-start); --primary-color: var(--color-text); --secondary-color: #d0d7dd; --active-color: var(--color-accent); --accent-color: var(--color-danger); --light-color: var(--color-surface-alt); --dark-color: var(--color-text); }