/* cms design tokens. Every visual decision in base.css / components.css refers to a token here; templates never use raw colours or pixel values. Light is the default (:root). Dark switches on the OS preference unless , or on an explicit (server sets it from a cookie). The two dark blocks are identical on purpose: CSS cannot join a media query and an attribute selector without nesting. [data-theme] works on any element, so a fragment can preview the other theme. */ :root, [data-theme="light"] { color-scheme: light; /* --- Raw scale: never used by components, semantic tokens pick from it -- */ --gray-0: #ffffff; --gray-50: #f5f5f8; --gray-100: #eeeef2; --gray-200: #dcdce4; --gray-300: #c4c4d0; --gray-500: #8a8a9a; --gray-600: #66667a; --gray-700: #4b4b5c; --gray-900: #1b1b24; --violet-100: #ece6fb; /* accent: the "esoteric" brand hue, kept calm */ --violet-600: #6d4fc4; --violet-700: #5b3fb0; --blue-100: #e3edff; /* info: anything in progress */ --blue-700: #1d4ed8; --green-100: #e2f6e8; /* success */ --green-700: #167036; --amber-100: #fff1dc; /* warning: needs the manager's attention */ --amber-700: #9a4e07; --red-100: #fde7e7; /* danger */ --red-700: #b42318; /* --- Semantic colours ------------------------------------------------ */ --bg: var(--gray-50); /* page background */ --surface: var(--gray-0); /* cards, tables, nav, dialogs */ --surface-2: var(--gray-100); /* table header, hover rows, code, skeleton base */ --text: var(--gray-900); /* body text */ --muted: var(--gray-600); /* secondary text; still ≥4.5:1 on --surface */ --border: var(--gray-200); /* hairlines */ --border-strong: var(--gray-300); /* inputs, dropzone, dividers that must be seen */ --accent: var(--violet-600); /* primary buttons, links, active nav */ --accent-hover: var(--violet-700); --accent-fg: #ffffff; /* text on --accent */ --accent-soft: var(--violet-100); /* selected row, active tab background */ --danger: var(--red-700); --danger-soft: var(--red-100); --warning: var(--amber-700); --warning-soft: var(--amber-100); --success: var(--green-700); --success-soft: var(--green-100); --info: var(--blue-700); --info-soft: var(--blue-100); --overlay: rgba(20, 20, 30, .45); /* dialog backdrop */ --placeholder-a: #d9d3ee; /* image placeholder gradient (mockups, skeleton) */ --placeholder-b: #eef0f6; /* --- Tones: (bg, fg) pairs for badges, flashes, tiles. Status tokens map every state of the three status machines onto a tone, so a colour change is one line and every screen follows. ---------------------------------- */ --tone-neutral-bg: var(--gray-100); --tone-neutral-fg: var(--gray-700); --tone-info-bg: var(--blue-100); --tone-info-fg: var(--blue-700); --tone-accent-bg: var(--violet-100); --tone-accent-fg: var(--violet-700); --tone-warning-bg: var(--amber-100); --tone-warning-fg: var(--amber-700); --tone-success-bg: var(--green-100); --tone-success-fg: var(--green-700); --tone-danger-bg: var(--red-100); --tone-danger-fg: var(--red-700); --tone-disabled-bg: transparent; --tone-disabled-fg: var(--gray-600); /* greyed, dashed border; ≥4.5:1 kept */ /* --- Status: package (architecture.md §3) --------------------------- */ --status-draft-bg: var(--tone-neutral-bg); --status-draft-fg: var(--tone-neutral-fg); /* created, nothing ran */ --status-planning-bg: var(--tone-info-bg); --status-planning-fg: var(--tone-info-fg); /* step 1 job running (pulsing dot) */ --status-topics_ready-bg: var(--tone-accent-bg); --status-topics_ready-fg: var(--tone-accent-fg); /* manager edits topics */ --status-generating-bg: var(--tone-info-bg); --status-generating-fg: var(--tone-info-fg); /* step 2 running (pulsing dot) */ --status-review-bg: var(--tone-warning-bg); --status-review-fg: var(--tone-warning-fg); /* manager's turn */ --status-failed-bg: var(--tone-danger-bg); --status-failed-fg: var(--tone-danger-fg); --status-paused-bg: var(--tone-danger-bg); --status-paused-fg: var(--tone-danger-fg); /* stopped: provider out of funds */ --status-done-bg: var(--tone-success-bg); --status-done-fg: var(--tone-success-fg); /* --- Status: content item ------------------------------------------- */ --status-pending-bg: var(--tone-neutral-bg); --status-pending-fg: var(--tone-neutral-fg); /* waits for step 2 */ /* generating: same token as the package state above */ /* draft: waiting for review = the manager's turn, so warning tone */ --status-item_draft-bg: var(--tone-warning-bg); --status-item_draft-fg: var(--tone-warning-fg); --status-approved-bg: var(--tone-success-bg); --status-approved-fg: var(--tone-success-fg); --status-rejected-bg: var(--tone-danger-bg); --status-rejected-fg: var(--tone-danger-fg); --status-upload-bg: var(--tone-accent-bg); --status-upload-fg: var(--tone-accent-fg); /* manager must upload a real file */ --status-not_supported-bg: var(--tone-disabled-bg);--status-not_supported-fg: var(--tone-disabled-fg);/* video, greyed */ /* --- Status: generation job ----------------------------------------- */ --status-queued-bg: var(--tone-neutral-bg); --status-queued-fg: var(--tone-neutral-fg); --status-running-bg: var(--tone-info-bg); --status-running-fg: var(--tone-info-fg); /* pulsing dot */ --status-succeeded-bg: var(--tone-success-bg); --status-succeeded-fg: var(--tone-success-fg); /* failed: same token as the package state above */ --status-cancelled-bg: var(--tone-disabled-bg); --status-cancelled-fg: var(--tone-disabled-fg); /* --- Typography: system stack only, px sizes (in-app browsers agree), base 14px like reports-ui ------------------------------------------- */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 11px; /* counters, table meta */ --text-sm: 12.5px; /* badges, chips, hints */ --text-md: 14px; /* body */ --text-lg: 16px; /* card titles, h3 */ --text-xl: 18px; /* h2 */ --text-2xl: 22px; /* h1 */ --text-3xl: 28px; /* cost tile number */ --leading-tight: 1.25; --leading-normal: 1.45; --leading-relaxed: 1.6; /* generated post text in the editor */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --- Spacing (4px grid) --------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* --- Radii, shadows, focus, z-index --------------------------------- */ --radius-sm: 4px; /* badges, chips, inputs */ --radius-md: 8px; /* buttons, cards, table wrap */ --radius-lg: 12px; /* dialog, gallery tiles */ --radius-full: 999px;/* pills, avatars, progress */ --shadow-sm: 0 1px 2px rgba(20, 20, 30, .06); --shadow-md: 0 4px 12px rgba(20, 20, 30, .10); --shadow-lg: 0 12px 32px rgba(20, 20, 30, .18); /* dialog, toast */ --focus-ring: 0 0 0 3px rgba(109, 79, 196, .40); /* accent at 40%: visible on light and dark */ --z-sticky: 10; /* table header, top nav */ --z-dropdown: 20; /* menus, popovers */ --z-dialog: 30; /* confirm dialog + backdrop */ --z-toast: 40; /* flash messages, above dialogs */ /* --- Layout ----------------------------------------------------------- */ --topnav-h: 48px; --tabbar-h: 56px; /* phone bottom tab bar, without the safe-area inset */ --content-max: 1400px; /* settings tables; lists and the wizard use 960px (base.css) */ } /* Dark theme values. Same token names, so components need no changes. */ [data-theme="dark"] { color-scheme: dark; --bg: #121218; --surface: #1b1b23; --surface-2: #24242e; --text: #e8e8ee; --muted: #9a9aad; --border: #2f2f3b; --border-strong: #40404f; --accent: #8f76e0; --accent-hover: #a693ec; --accent-fg: #14101f; --accent-soft: #2c2350; --danger: #f28b8b; --danger-soft: #3a1a1c; --warning: #f5b862; --warning-soft: #3a2a10; --success: #62d58a; --success-soft: #12301d; --info: #8ab4ff; --info-soft: #1b2a4d; --overlay: rgba(0, 0, 0, .60); --placeholder-a: #3a3352; --placeholder-b: #24242e; --tone-neutral-bg: #2a2a35; --tone-neutral-fg: #b8b8c8; --tone-info-bg: #1b2a4d; --tone-info-fg: #8ab4ff; --tone-accent-bg: #2c2350; --tone-accent-fg: #b6a3ff; --tone-warning-bg: #3a2a10; --tone-warning-fg: #f5b862; --tone-success-bg: #12301d; --tone-success-fg: #62d58a; --tone-danger-bg: #3a1a1c; --tone-danger-fg: #f28b8b; --tone-disabled-fg: #8f8fa3; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 4px 12px rgba(0, 0, 0, .45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .60); --focus-ring: 0 0 0 3px rgba(166, 147, 236, .55); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #121218; --surface: #1b1b23; --surface-2: #24242e; --text: #e8e8ee; --muted: #9a9aad; --border: #2f2f3b; --border-strong: #40404f; --accent: #8f76e0; --accent-hover: #a693ec; --accent-fg: #14101f; --accent-soft: #2c2350; --danger: #f28b8b; --danger-soft: #3a1a1c; --warning: #f5b862; --warning-soft: #3a2a10; --success: #62d58a; --success-soft: #12301d; --info: #8ab4ff; --info-soft: #1b2a4d; --overlay: rgba(0, 0, 0, .60); --placeholder-a: #3a3352; --placeholder-b: #24242e; --tone-neutral-bg: #2a2a35; --tone-neutral-fg: #b8b8c8; --tone-info-bg: #1b2a4d; --tone-info-fg: #8ab4ff; --tone-accent-bg: #2c2350; --tone-accent-fg: #b6a3ff; --tone-warning-bg: #3a2a10; --tone-warning-fg: #f5b862; --tone-success-bg: #12301d; --tone-success-fg: #62d58a; --tone-danger-bg: #3a1a1c; --tone-danger-fg: #f28b8b; --tone-disabled-fg: #8f8fa3; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 4px 12px rgba(0, 0, 0, .45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .60); --focus-ring: 0 0 0 3px rgba(166, 147, 236, .55); } }