/* * Design tokens — single source of truth for the Angular SPA and the Astro * marketing site. The `site/public/styles/` directory is a symlink to this * folder, so both runtimes share these variables. * * Theme resolution order (most-specific wins): * 1. or — explicit user * override; ThemeService writes this attribute when the user toggles. * 2. @media (prefers-color-scheme: light) — OS preference, * applied only when the user has NOT made an explicit choice. * 3. :root defaults — dark. * * Result: the OS preference drives the look by default, the user can override * with the in-app toggle, and clearing the override (`data-theme="system"` or * removing the attribute) falls back to OS. The Astro site picks up #1+#2 * automatically since the symlink shares this stylesheet. * * NEVER style PrimeNG by class override. The Angular app binds PrimeNG's * `--p-*` properties to these `--pgsx-*` tokens via primeng-overrides.css. */ :root { color-scheme: dark; /* Surfaces (dark by default) */ --pgsx-bg: #1a1a1a; --pgsx-surface: #232323; --pgsx-surface-elevated: #2c2c2c; --pgsx-border: #3a3a3a; --pgsx-rule: #2a2a2a; /* Text */ --pgsx-text-primary: #ececec; --pgsx-text-secondary: #a8a8a8; --pgsx-text-muted: #6f6f6f; /* Accent (turquoise) */ --pgsx-accent: #28d5d7; --pgsx-accent-hover: #67e9ec; --pgsx-accent-on: #1a1a1a; /* State */ --pgsx-success: #5eb87a; --pgsx-warning: #d8a23c; --pgsx-danger: #d96a6a; /* Typography */ --pgsx-font-display: "Fraunces", "Times New Roman", Georgia, serif; --pgsx-font-body: "IBM Plex Sans", "Helvetica Neue", system-ui, sans-serif; --pgsx-font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace; --pgsx-text-xs: 12px; --pgsx-text-sm: 13px; --pgsx-text-base: 16px; --pgsx-text-md: 18px; --pgsx-text-lg: 22px; --pgsx-text-xl: 28px; --pgsx-text-2xl: 36px; --pgsx-text-3xl: 48px; --pgsx-text-4xl: 64px; --pgsx-text-5xl: 88px; --pgsx-leading-display: 1.05; --pgsx-leading-heading: 1.2; --pgsx-leading-body: 1.65; --pgsx-leading-ui: 1.4; --pgsx-tracking-display: -0.02em; --pgsx-tracking-tight: -0.01em; --pgsx-tracking-normal: 0; --pgsx-tracking-loose: 0.02em; --pgsx-tracking-eyebrow: 0.18em; --pgsx-measure-narrow: 50ch; --pgsx-measure-default: 68ch; --pgsx-measure-wide: 80ch; /* Spacing */ --pgsx-space-1: 4px; --pgsx-space-2: 8px; --pgsx-space-3: 12px; --pgsx-space-4: 16px; --pgsx-space-6: 24px; --pgsx-space-8: 32px; --pgsx-space-12: 48px; --pgsx-space-16: 64px; --pgsx-space-24: 96px; --pgsx-space-32: 128px; /* Radius */ --pgsx-radius-sm: 4px; --pgsx-radius-md: 8px; --pgsx-radius-lg: 12px; --pgsx-radius-full: 9999px; /* Shadow */ --pgsx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --pgsx-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.45); --pgsx-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.55); /* Motion */ --pgsx-duration-fast: 120ms; --pgsx-duration-default: 200ms; --pgsx-duration-slow: 400ms; --pgsx-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --pgsx-easing-emphasised: cubic-bezier(0.2, 0, 0, 1); /* Layout shell */ --pgsx-shell-max-width: 1240px; --pgsx-shell-gutter: clamp(16px, 4vw, 48px); --pgsx-rule-weight: 1px; /* Sidebar geometry (app shell only — not used by the marketing site) */ --pgsx-sidebar-width: 240px; --pgsx-sidebar-collapsed-width: 64px; --pgsx-topbar-height: 60px; /* --- Legacy aliases ---------------------------------------------------- * Earlier components (profile, settings, notifications, command-palette) * reference the older `--color-*` / `--border-radius-*` token names. These * aliases keep them working without a parallel refactor of every * component-scoped SCSS. New code should use the `--pgsx-*` tokens directly. */ --color-bg-primary: var(--pgsx-bg); --color-bg-secondary: var(--pgsx-surface); --color-bg-elevated: var(--pgsx-surface-elevated); --color-text-primary: var(--pgsx-text-primary); --color-text-secondary: var(--pgsx-text-secondary); --color-text-muted: var(--pgsx-text-muted); --color-accent: var(--pgsx-accent); --color-accent-hover: var(--pgsx-accent-hover); --color-accent-dim: color-mix(in srgb, var(--pgsx-accent) 12%, transparent); --color-accent-rgb: 40, 213, 215; --color-glass-bg: color-mix(in srgb, var(--pgsx-text-primary) 4%, transparent); --color-glass-border: var(--pgsx-rule); --color-input-bg: var(--pgsx-surface); --color-input-border: var(--pgsx-border); --color-error: var(--pgsx-danger); --color-success: var(--pgsx-success); --color-warning: var(--pgsx-warning); --border-radius-sm: var(--pgsx-radius-sm); --border-radius-md: var(--pgsx-radius-md); --border-radius-lg: var(--pgsx-radius-lg); --border-radius-full: var(--pgsx-radius-full); --font-family-primary: var(--pgsx-font-body); --primary-accent: var(--pgsx-accent); } /* Shared light palette. Declared once and referenced by both the OS-preference media query and the explicit `[data-theme="light"]` override below. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --pgsx-bg: #fafafa; --pgsx-surface: #ffffff; --pgsx-surface-elevated: #f3f3f3; --pgsx-border: #e2e2e2; --pgsx-rule: #ebebeb; --pgsx-text-primary: #1a1a1a; --pgsx-text-secondary: #555555; --pgsx-text-muted: #888888; --pgsx-accent: #0a7274; --pgsx-accent-hover: #075a5c; --pgsx-accent-on: #ffffff; --pgsx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --pgsx-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08); --pgsx-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12); } } /* Explicit user override — wins over both the :root default and the OS query because attribute selectors are more specific than bare-element selectors. */ :root[data-theme="light"] { color-scheme: light; --pgsx-bg: #fafafa; --pgsx-surface: #ffffff; --pgsx-surface-elevated: #f3f3f3; --pgsx-border: #e2e2e2; --pgsx-rule: #ebebeb; --pgsx-text-primary: #1a1a1a; --pgsx-text-secondary: #555555; --pgsx-text-muted: #888888; --pgsx-accent: #118a8d; --pgsx-accent-hover: #0e7173; --pgsx-accent-on: #ffffff; --pgsx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --pgsx-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08); --pgsx-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.12); } /* `data-theme="dark"` doesn't need its own block — the :root defaults are already dark — but it also implicitly disables the light media query above. */