/* =============================================================
 * trygc-hub-override.css — v3 "TryGC theme engine"
 * GENERATED by work/hub-tokens-20260917/build-engine-css.cjs. Edit that, not this.
 *
 * Theming engine ported from the TryGC Studio build (mmii-main): the same
 * presets (Default, Tangerine, Soft Pop, Brutalist), fonts and layout options,
 * driven by attributes that /trygc-theme-engine.js sets on <html>:
 *   data-theme-preset, data-font, data-content-layout, data-sidebar-variant
 *
 * Layers, in order:
 *   1. Engine tokens (--te-*): Studio default theme, then the presets.
 *   2. TryGC additions: brand accent, status colours, fonts.
 *   3. Bridge: every variable the Ops app reads -> --te-*. The app writes its own
 *      palette inline on <html> (trygc-design-system.js) and trygc-google-ui.css
 *      uses !important, so the bridge uses !important on an ID-weighted selector.
 *   4. Polish: flatter cards, calmer weights, cleaner header and focus rings.
 *   5. Layout options, then the preferences panel.
 * Only styles and custom properties — no markup is changed by this file.
 * ============================================================= */

/* 1. Engine tokens — Studio default theme (src/app/globals.css) */
:root {
  --te-radius: 0.625rem;
  --te-card: oklch(1 0 0);
  --te-card-foreground: oklch(0.145 0 0);
  --te-popover: oklch(1 0 0);
  --te-popover-foreground: oklch(0.145 0 0);
  --te-primary: oklch(0.205 0 0);
  --te-primary-foreground: oklch(0.985 0 0);
  --te-secondary: oklch(0.97 0 0);
  --te-secondary-foreground: oklch(0.205 0 0);
  --te-muted: oklch(0.97 0 0);
  --te-muted-foreground: oklch(0.556 0 0);
  --te-accent: oklch(0.97 0 0);
  --te-accent-foreground: oklch(0.205 0 0);
  --te-destructive: oklch(0.577 0.245 27.325);
  --te-border: oklch(0.922 0 0);
  --te-input: oklch(0.922 0 0);
  --te-ring: oklch(0.708 0 0);
  --te-chart-1: oklch(0.585 0.233 277.117);
  --te-chart-2: oklch(0.6 0.118 184.704);
  --te-chart-3: oklch(0.769 0.188 70.08);
  --te-chart-4: oklch(0.645 0.246 16.439);
  --te-chart-5: oklch(0.588 0.158 241.966);
  --te-sidebar: oklch(0.985 0 0);
  --te-sidebar-foreground: oklch(0.145 0 0);
  --te-sidebar-primary: oklch(0.205 0 0);
  --te-sidebar-primary-foreground: oklch(0.985 0 0);
  --te-sidebar-accent: oklch(0.97 0 0);
  --te-sidebar-accent-foreground: oklch(0.205 0 0);
  --te-sidebar-border: oklch(0.922 0 0);
  --te-sidebar-ring: oklch(0.708 0 0);
  --te-background: oklch(1 0 0);
  --te-foreground: oklch(0.145 0 0);
}

:root.dark {
  --te-background: oklch(0.145 0 0);
  --te-foreground: oklch(0.985 0 0);
  --te-card: oklch(0.205 0 0);
  --te-card-foreground: oklch(0.985 0 0);
  --te-popover: oklch(0.205 0 0);
  --te-popover-foreground: oklch(0.985 0 0);
  --te-primary: oklch(0.922 0 0);
  --te-primary-foreground: oklch(0.205 0 0);
  --te-secondary: oklch(0.269 0 0);
  --te-secondary-foreground: oklch(0.985 0 0);
  --te-muted: oklch(0.269 0 0);
  --te-muted-foreground: oklch(0.708 0 0);
  --te-accent: oklch(0.269 0 0);
  --te-accent-foreground: oklch(0.985 0 0);
  --te-destructive: oklch(0.704 0.191 22.216);
  --te-border: oklch(1 0 0 / 10%);
  --te-input: oklch(1 0 0 / 15%);
  --te-ring: oklch(0.556 0 0);
  --te-chart-1: oklch(0.673 0.182 276.935);
  --te-chart-2: oklch(0.777 0.152 181.912);
  --te-chart-3: oklch(0.828 0.189 84.429);
  --te-chart-4: oklch(0.712 0.194 13.428);
  --te-chart-5: oklch(0.746 0.16 232.661);
  --te-sidebar: oklch(0.205 0 0);
  --te-sidebar-foreground: oklch(0.985 0 0);
  --te-sidebar-primary: oklch(0.922 0 0);
  --te-sidebar-primary-foreground: oklch(0.205 0 0);
  --te-sidebar-accent: oklch(0.269 0 0);
  --te-sidebar-accent-foreground: oklch(0.985 0 0);
  --te-sidebar-border: oklch(1 0 0 / 10%);
  --te-sidebar-ring: oklch(0.556 0 0);
}

/* Preset: Tangerine — TryGC variant */
:root[data-theme-preset="tangerine"] {
  --te-radius: 0.75rem;
  --te-background: oklch(0.99 0.005 52);
  --te-foreground: oklch(0.21 0.02 52);
  --te-card: oklch(1 0 0);
  --te-card-foreground: oklch(0.21 0.02 52);
  --te-popover: oklch(1 0 0);
  --te-popover-foreground: oklch(0.21 0.02 52);
  --te-primary: oklch(0.58 0.16 52);
  --te-primary-foreground: oklch(0.99 0.005 100);
  --te-secondary: oklch(0.965 0.011 52);
  --te-secondary-foreground: oklch(0.26 0.03 52);
  --te-muted: oklch(0.968 0.009 52);
  --te-muted-foreground: oklch(0.53 0.03 52);
  --te-accent: oklch(0.955 0.019 52);
  --te-accent-foreground: oklch(0.26 0.04 52);
  --te-destructive: oklch(0.58 0.2 25);
  --te-border: oklch(0.905 0.012 52);
  --te-input: oklch(0.9 0.012 52);
  --te-ring: oklch(0.58 0.14 52);
  --te-chart-1: oklch(0.62 0.125 52);
  --te-chart-2: oklch(0.62 0.119 94);
  --te-chart-3: oklch(0.62 0.113 6);
  --te-chart-4: oklch(0.62 0.107 202);
  --te-chart-5: oklch(0.62 0.101 148);
  --te-sidebar: oklch(0.982 0.008 52);
  --te-sidebar-foreground: oklch(0.23 0.02 52);
  --te-sidebar-primary: oklch(0.58 0.16 52);
  --te-sidebar-primary-foreground: oklch(0.99 0.005 100);
  --te-sidebar-accent: oklch(0.955 0.016 52);
  --te-sidebar-accent-foreground: oklch(0.26 0.04 52);
  --te-sidebar-border: oklch(0.91 0.012 52);
  --te-sidebar-ring: oklch(0.58 0.14 52);
  --te-brand: oklch(0.58 0.16 52);
  --te-success: oklch(0.58 0.12 155);
  --te-warning: oklch(0.7 0.13 72);
  --te-brand: var(--te-primary);
}

.dark:root[data-theme-preset="tangerine"] {
  --te-radius: 0.75rem;
  --te-background: oklch(0.17 0.012 52);
  --te-foreground: oklch(0.96 0.006 52);
  --te-card: oklch(0.21 0.014 52);
  --te-card-foreground: oklch(0.96 0.006 52);
  --te-popover: oklch(0.225 0.014 52);
  --te-popover-foreground: oklch(0.96 0.006 52);
  --te-primary: oklch(0.74 0.15 52);
  --te-primary-foreground: oklch(0.18 0.02 52);
  --te-secondary: oklch(0.26 0.015 52);
  --te-secondary-foreground: oklch(0.95 0.006 52);
  --te-muted: oklch(0.255 0.013 52);
  --te-muted-foreground: oklch(0.73 0.02 52);
  --te-accent: oklch(0.28 0.02 52);
  --te-accent-foreground: oklch(0.95 0.008 52);
  --te-destructive: oklch(0.7 0.17 22);
  --te-border: oklch(0.32 0.016 52);
  --te-input: oklch(0.34 0.016 52);
  --te-ring: oklch(0.74 0.13 52);
  --te-chart-1: oklch(0.74 0.130 52);
  --te-chart-2: oklch(0.74 0.124 94);
  --te-chart-3: oklch(0.74 0.118 6);
  --te-chart-4: oklch(0.74 0.112 202);
  --te-chart-5: oklch(0.74 0.106 148);
  --te-sidebar: oklch(0.195 0.014 52);
  --te-sidebar-foreground: oklch(0.95 0.006 52);
  --te-sidebar-primary: oklch(0.74 0.15 52);
  --te-sidebar-primary-foreground: oklch(0.18 0.02 52);
  --te-sidebar-accent: oklch(0.27 0.017 52);
  --te-sidebar-accent-foreground: oklch(0.95 0.008 52);
  --te-sidebar-border: oklch(0.31 0.016 52);
  --te-sidebar-ring: oklch(0.74 0.13 52);
  --te-brand: oklch(0.74 0.15 52);
  --te-success: oklch(0.72 0.13 155);
  --te-warning: oklch(0.8 0.13 80);
  --te-brand: var(--te-primary);
}

/* Preset: Indigo — TryGC variant */
:root[data-theme-preset="indigo"] {
  --te-radius: 0.75rem;
  --te-background: oklch(0.99 0.005 277);
  --te-foreground: oklch(0.21 0.02 277);
  --te-card: oklch(1 0 0);
  --te-card-foreground: oklch(0.21 0.02 277);
  --te-popover: oklch(1 0 0);
  --te-popover-foreground: oklch(0.21 0.02 277);
  --te-primary: oklch(0.52 0.17 277);
  --te-primary-foreground: oklch(0.99 0.005 100);
  --te-secondary: oklch(0.965 0.011 277);
  --te-secondary-foreground: oklch(0.26 0.03 277);
  --te-muted: oklch(0.968 0.009 277);
  --te-muted-foreground: oklch(0.53 0.03 277);
  --te-accent: oklch(0.955 0.019 277);
  --te-accent-foreground: oklch(0.26 0.04 277);
  --te-destructive: oklch(0.58 0.2 25);
  --te-border: oklch(0.905 0.012 277);
  --te-input: oklch(0.9 0.012 277);
  --te-ring: oklch(0.52 0.15000000000000002 277);
  --te-chart-1: oklch(0.62 0.125 277);
  --te-chart-2: oklch(0.62 0.119 319);
  --te-chart-3: oklch(0.62 0.113 231);
  --te-chart-4: oklch(0.62 0.107 67);
  --te-chart-5: oklch(0.62 0.101 13);
  --te-sidebar: oklch(0.982 0.008 277);
  --te-sidebar-foreground: oklch(0.23 0.02 277);
  --te-sidebar-primary: oklch(0.52 0.17 277);
  --te-sidebar-primary-foreground: oklch(0.99 0.005 100);
  --te-sidebar-accent: oklch(0.955 0.016 277);
  --te-sidebar-accent-foreground: oklch(0.26 0.04 277);
  --te-sidebar-border: oklch(0.91 0.012 277);
  --te-sidebar-ring: oklch(0.52 0.15000000000000002 277);
  --te-brand: oklch(0.52 0.17 277);
  --te-success: oklch(0.58 0.12 155);
  --te-warning: oklch(0.7 0.13 72);
  --te-brand: var(--te-primary);
}

.dark:root[data-theme-preset="indigo"] {
  --te-radius: 0.75rem;
  --te-background: oklch(0.17 0.012 277);
  --te-foreground: oklch(0.96 0.006 277);
  --te-card: oklch(0.21 0.014 277);
  --te-card-foreground: oklch(0.96 0.006 277);
  --te-popover: oklch(0.225 0.014 277);
  --te-popover-foreground: oklch(0.96 0.006 277);
  --te-primary: oklch(0.72 0.14 277);
  --te-primary-foreground: oklch(0.18 0.02 277);
  --te-secondary: oklch(0.26 0.015 277);
  --te-secondary-foreground: oklch(0.95 0.006 277);
  --te-muted: oklch(0.255 0.013 277);
  --te-muted-foreground: oklch(0.73 0.02 277);
  --te-accent: oklch(0.28 0.02 277);
  --te-accent-foreground: oklch(0.95 0.008 277);
  --te-destructive: oklch(0.7 0.17 22);
  --te-border: oklch(0.32 0.016 277);
  --te-input: oklch(0.34 0.016 277);
  --te-ring: oklch(0.72 0.12000000000000001 277);
  --te-chart-1: oklch(0.74 0.130 277);
  --te-chart-2: oklch(0.74 0.124 319);
  --te-chart-3: oklch(0.74 0.118 231);
  --te-chart-4: oklch(0.74 0.112 67);
  --te-chart-5: oklch(0.74 0.106 13);
  --te-sidebar: oklch(0.195 0.014 277);
  --te-sidebar-foreground: oklch(0.95 0.006 277);
  --te-sidebar-primary: oklch(0.72 0.14 277);
  --te-sidebar-primary-foreground: oklch(0.18 0.02 277);
  --te-sidebar-accent: oklch(0.27 0.017 277);
  --te-sidebar-accent-foreground: oklch(0.95 0.008 277);
  --te-sidebar-border: oklch(0.31 0.016 277);
  --te-sidebar-ring: oklch(0.72 0.12000000000000001 277);
  --te-brand: oklch(0.72 0.14 277);
  --te-success: oklch(0.72 0.13 155);
  --te-warning: oklch(0.8 0.13 80);
  --te-brand: var(--te-primary);
}

/* Preset: Teal — TryGC variant */
:root[data-theme-preset="teal"] {
  --te-radius: 0.75rem;
  --te-background: oklch(0.99 0.005 205);
  --te-foreground: oklch(0.21 0.02 205);
  --te-card: oklch(1 0 0);
  --te-card-foreground: oklch(0.21 0.02 205);
  --te-popover: oklch(1 0 0);
  --te-popover-foreground: oklch(0.21 0.02 205);
  --te-primary: oklch(0.54 0.12 205);
  --te-primary-foreground: oklch(0.99 0.005 100);
  --te-secondary: oklch(0.965 0.011 205);
  --te-secondary-foreground: oklch(0.26 0.03 205);
  --te-muted: oklch(0.968 0.009 205);
  --te-muted-foreground: oklch(0.53 0.03 205);
  --te-accent: oklch(0.955 0.019 205);
  --te-accent-foreground: oklch(0.26 0.04 205);
  --te-destructive: oklch(0.58 0.2 25);
  --te-border: oklch(0.905 0.012 205);
  --te-input: oklch(0.9 0.012 205);
  --te-ring: oklch(0.54 0.09999999999999999 205);
  --te-chart-1: oklch(0.62 0.125 205);
  --te-chart-2: oklch(0.62 0.119 247);
  --te-chart-3: oklch(0.62 0.113 159);
  --te-chart-4: oklch(0.62 0.107 355);
  --te-chart-5: oklch(0.62 0.101 301);
  --te-sidebar: oklch(0.982 0.008 205);
  --te-sidebar-foreground: oklch(0.23 0.02 205);
  --te-sidebar-primary: oklch(0.54 0.12 205);
  --te-sidebar-primary-foreground: oklch(0.99 0.005 100);
  --te-sidebar-accent: oklch(0.955 0.016 205);
  --te-sidebar-accent-foreground: oklch(0.26 0.04 205);
  --te-sidebar-border: oklch(0.91 0.012 205);
  --te-sidebar-ring: oklch(0.54 0.09999999999999999 205);
  --te-brand: oklch(0.54 0.12 205);
  --te-success: oklch(0.58 0.12 155);
  --te-warning: oklch(0.7 0.13 72);
  --te-brand: var(--te-primary);
}

.dark:root[data-theme-preset="teal"] {
  --te-radius: 0.75rem;
  --te-background: oklch(0.17 0.012 205);
  --te-foreground: oklch(0.96 0.006 205);
  --te-card: oklch(0.21 0.014 205);
  --te-card-foreground: oklch(0.96 0.006 205);
  --te-popover: oklch(0.225 0.014 205);
  --te-popover-foreground: oklch(0.96 0.006 205);
  --te-primary: oklch(0.74 0.11 205);
  --te-primary-foreground: oklch(0.18 0.02 205);
  --te-secondary: oklch(0.26 0.015 205);
  --te-secondary-foreground: oklch(0.95 0.006 205);
  --te-muted: oklch(0.255 0.013 205);
  --te-muted-foreground: oklch(0.73 0.02 205);
  --te-accent: oklch(0.28 0.02 205);
  --te-accent-foreground: oklch(0.95 0.008 205);
  --te-destructive: oklch(0.7 0.17 22);
  --te-border: oklch(0.32 0.016 205);
  --te-input: oklch(0.34 0.016 205);
  --te-ring: oklch(0.74 0.09 205);
  --te-chart-1: oklch(0.74 0.130 205);
  --te-chart-2: oklch(0.74 0.124 247);
  --te-chart-3: oklch(0.74 0.118 159);
  --te-chart-4: oklch(0.74 0.112 355);
  --te-chart-5: oklch(0.74 0.106 301);
  --te-sidebar: oklch(0.195 0.014 205);
  --te-sidebar-foreground: oklch(0.95 0.006 205);
  --te-sidebar-primary: oklch(0.74 0.11 205);
  --te-sidebar-primary-foreground: oklch(0.18 0.02 205);
  --te-sidebar-accent: oklch(0.27 0.017 205);
  --te-sidebar-accent-foreground: oklch(0.95 0.008 205);
  --te-sidebar-border: oklch(0.31 0.016 205);
  --te-sidebar-ring: oklch(0.74 0.09 205);
  --te-brand: oklch(0.74 0.11 205);
  --te-success: oklch(0.72 0.13 155);
  --te-warning: oklch(0.8 0.13 80);
  --te-brand: var(--te-primary);
}

/* Preset: Plum — TryGC variant */
:root[data-theme-preset="plum"] {
  --te-radius: 0.75rem;
  --te-background: oklch(0.99 0.005 315);
  --te-foreground: oklch(0.21 0.02 315);
  --te-card: oklch(1 0 0);
  --te-card-foreground: oklch(0.21 0.02 315);
  --te-popover: oklch(1 0 0);
  --te-popover-foreground: oklch(0.21 0.02 315);
  --te-primary: oklch(0.52 0.16 315);
  --te-primary-foreground: oklch(0.99 0.005 100);
  --te-secondary: oklch(0.965 0.011 315);
  --te-secondary-foreground: oklch(0.26 0.03 315);
  --te-muted: oklch(0.968 0.009 315);
  --te-muted-foreground: oklch(0.53 0.03 315);
  --te-accent: oklch(0.955 0.019 315);
  --te-accent-foreground: oklch(0.26 0.04 315);
  --te-destructive: oklch(0.58 0.2 25);
  --te-border: oklch(0.905 0.012 315);
  --te-input: oklch(0.9 0.012 315);
  --te-ring: oklch(0.52 0.14 315);
  --te-chart-1: oklch(0.62 0.125 315);
  --te-chart-2: oklch(0.62 0.119 357);
  --te-chart-3: oklch(0.62 0.113 269);
  --te-chart-4: oklch(0.62 0.107 105);
  --te-chart-5: oklch(0.62 0.101 51);
  --te-sidebar: oklch(0.982 0.008 315);
  --te-sidebar-foreground: oklch(0.23 0.02 315);
  --te-sidebar-primary: oklch(0.52 0.16 315);
  --te-sidebar-primary-foreground: oklch(0.99 0.005 100);
  --te-sidebar-accent: oklch(0.955 0.016 315);
  --te-sidebar-accent-foreground: oklch(0.26 0.04 315);
  --te-sidebar-border: oklch(0.91 0.012 315);
  --te-sidebar-ring: oklch(0.52 0.14 315);
  --te-brand: oklch(0.52 0.16 315);
  --te-success: oklch(0.58 0.12 155);
  --te-warning: oklch(0.7 0.13 72);
  --te-brand: var(--te-primary);
}

.dark:root[data-theme-preset="plum"] {
  --te-radius: 0.75rem;
  --te-background: oklch(0.17 0.012 315);
  --te-foreground: oklch(0.96 0.006 315);
  --te-card: oklch(0.21 0.014 315);
  --te-card-foreground: oklch(0.96 0.006 315);
  --te-popover: oklch(0.225 0.014 315);
  --te-popover-foreground: oklch(0.96 0.006 315);
  --te-primary: oklch(0.73 0.13 315);
  --te-primary-foreground: oklch(0.18 0.02 315);
  --te-secondary: oklch(0.26 0.015 315);
  --te-secondary-foreground: oklch(0.95 0.006 315);
  --te-muted: oklch(0.255 0.013 315);
  --te-muted-foreground: oklch(0.73 0.02 315);
  --te-accent: oklch(0.28 0.02 315);
  --te-accent-foreground: oklch(0.95 0.008 315);
  --te-destructive: oklch(0.7 0.17 22);
  --te-border: oklch(0.32 0.016 315);
  --te-input: oklch(0.34 0.016 315);
  --te-ring: oklch(0.73 0.11 315);
  --te-chart-1: oklch(0.74 0.130 315);
  --te-chart-2: oklch(0.74 0.124 357);
  --te-chart-3: oklch(0.74 0.118 269);
  --te-chart-4: oklch(0.74 0.112 105);
  --te-chart-5: oklch(0.74 0.106 51);
  --te-sidebar: oklch(0.195 0.014 315);
  --te-sidebar-foreground: oklch(0.95 0.006 315);
  --te-sidebar-primary: oklch(0.73 0.13 315);
  --te-sidebar-primary-foreground: oklch(0.18 0.02 315);
  --te-sidebar-accent: oklch(0.27 0.017 315);
  --te-sidebar-accent-foreground: oklch(0.95 0.008 315);
  --te-sidebar-border: oklch(0.31 0.016 315);
  --te-sidebar-ring: oklch(0.73 0.11 315);
  --te-brand: oklch(0.73 0.13 315);
  --te-success: oklch(0.72 0.13 155);
  --te-warning: oklch(0.8 0.13 80);
  --te-brand: var(--te-primary);
}

/* 2. TryGC additions — not part of the Studio palette */
:root {
  /* The default preset is neutral ink; TryGC orange stays as the accent. */
  --te-brand: oklch(0.705 0.15 60);
  --te-success: oklch(0.62 0.13 155);
  --te-warning: oklch(0.75 0.13 78);
  --te-info: oklch(0.55 0.02 286);
  --te-shadow-card: var(--te-shadow-xs, 0 0 #0000);
  --te-shadow-float: var(--te-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
  --te-font: "Geist", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif;
  --te-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
}

:root.dark {
  --te-brand: oklch(0.75 0.14 60);
  --te-success: oklch(0.7 0.13 155);
  --te-warning: oklch(0.8 0.13 80);
  --te-info: oklch(0.7 0.015 286);
}

/* Presets re-declare --te-brand after these rules, so they keep their own accent. */
:root[data-theme-preset="tangerine"], :root[data-theme-preset="indigo"], :root[data-theme-preset="teal"], :root[data-theme-preset="plum"] { --te-brand: var(--te-primary); }

html[data-font="geist"] { --te-font: "Geist", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif; }
html[data-font="inter"] { --te-font: "Inter", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif; }
html[data-font="noto-sans"] { --te-font: "Noto Sans", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif; }
html[data-font="nunito-sans"] { --te-font: "Nunito Sans", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif; }
html[data-font="figtree"] { --te-font: "Figtree", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif; }
html[data-font="roboto"] { --te-font: "Roboto", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif; }
html[data-font="raleway"] { --te-font: "Raleway", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif; }
html[data-font="dm-sans"] { --te-font: "DM Sans", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif; }
html[data-font="public-sans"] { --te-font: "Public Sans", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif; }
html[data-font="outfit"] { --te-font: "Outfit", "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif; }
html[data-font="geist-mono"] { --te-font: "Geist Mono", "Noto Sans Arabic", ui-monospace, monospace; }
html[data-font="jetbrains-mono"] { --te-font: "JetBrains Mono", "Noto Sans Arabic", ui-monospace, monospace; }
html[data-font="noto-serif"] { --te-font: "Noto Serif", "Noto Sans Arabic", ui-serif, Georgia, serif; }
html[data-font="roboto-slab"] { --te-font: "Roboto Slab", "Noto Sans Arabic", ui-serif, Georgia, serif; }
html[data-font="merriweather"] { --te-font: "Merriweather", "Noto Sans Arabic", ui-serif, Georgia, serif; }
html[data-font="lora"] { --te-font: "Lora", "Noto Sans Arabic", ui-serif, Georgia, serif; }
html[data-font="playfair-display"] { --te-font: "Playfair Display", "Noto Sans Arabic", ui-serif, Georgia, serif; }

/* 3. Bridge — Ops app variables -> engine tokens */
html:root[data-trygc-page]:not(#gc-te) {
  --background: var(--te-background) !important;
  --shadcn-background: var(--te-background) !important;
  --foreground: var(--te-foreground) !important;
  --shadcn-foreground: var(--te-foreground) !important;
  --surface: var(--te-card) !important;
  --card: var(--te-card) !important;
  --card-bg: var(--te-card) !important;
  --shadcn-card: var(--te-card) !important;
  --card-foreground: var(--te-card-foreground) !important;
  --shadcn-card-foreground: var(--te-card-foreground) !important;
  --popover: var(--te-popover) !important;
  --shadcn-popover: var(--te-popover) !important;
  --popover-foreground: var(--te-popover-foreground) !important;
  --shadcn-popover-foreground: var(--te-popover-foreground) !important;

  --primary: var(--te-primary) !important;
  --shadcn-primary: var(--te-primary) !important;
  --primary-foreground: var(--te-primary-foreground) !important;
  --shadcn-primary-foreground: var(--te-primary-foreground) !important;
  --secondary: var(--te-secondary) !important;
  --shadcn-secondary: var(--te-secondary) !important;
  --secondary-foreground: var(--te-secondary-foreground) !important;
  --shadcn-secondary-foreground: var(--te-secondary-foreground) !important;
  --muted: var(--te-muted) !important;
  --shadcn-muted: var(--te-muted) !important;
  --muted-foreground: var(--te-muted-foreground) !important;
  --shadcn-muted-foreground: var(--te-muted-foreground) !important;
  /* The Ops app uses --accent as a soft hover/chip tint under brand-coloured text, so a
   * preset's saturated accent (Brutalist blue, Soft Pop amber) is softened here. */
  --accent: color-mix(in oklch, var(--te-accent) 35%, var(--te-card)) !important;
  --shadcn-accent: color-mix(in oklch, var(--te-accent) 35%, var(--te-card)) !important;
  --accent-foreground: var(--te-foreground) !important;
  --shadcn-accent-foreground: var(--te-foreground) !important;
  --destructive: var(--te-destructive) !important;
  --shadcn-destructive: var(--te-destructive) !important;
  --destructive-foreground: oklch(0.985 0 0) !important;
  --shadcn-destructive-foreground: oklch(0.985 0 0) !important;

  --gc-purple: var(--te-brand) !important;
  --shadcn-brand-purple: var(--te-brand) !important;
  --accent-1: var(--te-brand) !important;
  --accent-2: var(--te-muted-foreground) !important;
  --accent-soft: color-mix(in oklch, var(--te-brand) 12%, var(--te-card)) !important;
  --gc-orange: var(--te-brand) !important;
  --gc-orange-soft: color-mix(in oklch, var(--te-brand) 12%, var(--te-card)) !important;
  --color-gc-orange: var(--te-brand) !important;
  --color-gc-purple: var(--te-brand) !important;

  --success: var(--te-success) !important;
  --success-text: var(--te-success) !important;
  --shadcn-success: var(--te-success) !important;
  --success-soft: color-mix(in oklch, var(--te-success) 12%, var(--te-card)) !important;
  --success-bg: color-mix(in oklch, var(--te-success) 12%, var(--te-card)) !important;
  --warning: var(--te-warning) !important;
  --warning-text: var(--te-warning) !important;
  --shadcn-warning: var(--te-warning) !important;
  --warning-soft: color-mix(in oklch, var(--te-warning) 14%, var(--te-card)) !important;
  --warning-bg: color-mix(in oklch, var(--te-warning) 14%, var(--te-card)) !important;
  --danger: var(--te-destructive) !important;
  --info: var(--te-info) !important;
  --info-text: var(--te-info) !important;
  --info-soft: var(--te-muted) !important;
  --info-bg: var(--te-muted) !important;

  --border: var(--te-border) !important;
  --card-border: var(--te-border) !important;
  --border-custom: var(--te-border) !important;
  --success-border: var(--te-border) !important;
  --warning-border: var(--te-border) !important;
  --info-border: var(--te-border) !important;
  --shadcn-border: var(--te-border) !important;
  --border-strong: color-mix(in oklch, var(--te-border), var(--te-foreground) 14%) !important;
  --border-hover: color-mix(in oklch, var(--te-border), var(--te-foreground) 14%) !important;
  --input: var(--te-input) !important;
  --shadcn-input: var(--te-input) !important;
  --ring: var(--te-ring) !important;
  --shadcn-ring: var(--te-ring) !important;

  --chart-1: var(--te-chart-1) !important;
  --shadcn-chart-1: var(--te-chart-1) !important;
  --chart-2: var(--te-chart-2) !important;
  --shadcn-chart-2: var(--te-chart-2) !important;
  --chart-3: var(--te-chart-3) !important;
  --shadcn-chart-3: var(--te-chart-3) !important;
  --chart-4: var(--te-chart-4) !important;
  --shadcn-chart-4: var(--te-chart-4) !important;
  --chart-5: var(--te-chart-5) !important;
  --shadcn-chart-5: var(--te-chart-5) !important;
  --chart-6: var(--te-chart-1) !important;
  --chart-7: var(--te-chart-2) !important;

  --radius: var(--te-radius) !important;
  --shadcn-radius: var(--te-radius) !important;
  --border-radius: var(--te-radius) !important;
  --radius-sm: calc(var(--te-radius) - 4px) !important;
  --radius-md: calc(var(--te-radius) - 2px) !important;
  --radius-lg: var(--te-radius) !important;
  --radius-xl: calc(var(--te-radius) + 4px) !important;

  --shadow-card: var(--te-shadow-card) !important;
  --shadcn-shadow-card: var(--te-shadow-card) !important;
  --shadow-soft: var(--te-shadow-card) !important;
  --shadow: var(--te-shadow-card) !important;
  --shadow-lg: var(--te-shadow-float) !important;
  --shadow-xl: var(--te-shadow-float) !important;
  --shadow-2xl: var(--te-shadow-float) !important;
  --shadcn-shadow-float: var(--te-shadow-float) !important;
  --gradient-brand: linear-gradient(100deg, var(--te-brand), var(--te-brand)) !important;

  --shadcn-font-sans: var(--te-font) !important;
  --shadcn-font-heading: var(--te-font) !important;

  /* The app's own --gcui-* layer (trygc-unified-ui.css / trygc-design-system-v2.css) */
  --gcui-font: var(--te-font) !important;
  --gcui-font-heading: var(--te-font) !important;
  --gcui-font-mono: var(--te-font-mono) !important;
  --gcui-primary: var(--te-brand) !important;
  --gcui-primary-hover: color-mix(in oklch, var(--te-brand), var(--te-foreground) 15%) !important;
  --gcui-primary-solid: var(--te-primary) !important;
  --gcui-primary-solid-hover: color-mix(in oklch, var(--te-primary) 85%, var(--te-background)) !important;
  --gcui-primary-soft: color-mix(in oklch, var(--te-brand) 12%, var(--te-card)) !important;
  --gcui-primary-line: color-mix(in oklch, var(--te-brand) 30%, transparent) !important;
  --gcui-secondary: var(--te-muted-foreground) !important;
  --gcui-secondary-hover: var(--te-foreground) !important;
  --gcui-secondary-soft: var(--te-muted) !important;
  --gcui-success: var(--te-success) !important;
  --gcui-warning: var(--te-warning) !important;
  --gcui-danger: var(--te-destructive) !important;
  --gcui-info: var(--te-info) !important;
  --gcui-canvas: var(--te-background) !important;
  --gcui-surface: var(--te-card) !important;
  --gcui-surface-2: var(--te-muted) !important;
  --gcui-surface-3: var(--te-secondary) !important;
  --gcui-text: var(--te-foreground) !important;
  --gcui-text-2: color-mix(in oklch, var(--te-foreground) 72%, var(--te-muted-foreground)) !important;
  --gcui-text-3: var(--te-muted-foreground) !important;
  --gcui-border: var(--te-border) !important;
  --gcui-border-strong: color-mix(in oklch, var(--te-border), var(--te-foreground) 14%) !important;
  --gcui-ring: var(--te-ring) !important;
  --gcui-focus: 0 0 0 3px color-mix(in oklch, var(--te-ring) 50%, transparent) !important;
  --gcui-shadow-sm: var(--te-shadow-card) !important;
  --gcui-shadow-card: var(--te-shadow-card) !important;
  --gcui-shadow-float: var(--te-shadow-float) !important;
  --gcui-radius-xs: calc(var(--te-radius) - 4px) !important;
  --gcui-radius-sm: calc(var(--te-radius) - 2px) !important;
  --gcui-radius-md: var(--te-radius) !important;
  --gcui-radius-lg: calc(var(--te-radius) + 4px) !important;
  --gcui-radius-xl: calc(var(--te-radius) + 8px) !important;

  /* Full Analysis / Creator Reach report layer (grand-community.css) */
  --gc-analysis-canvas: var(--te-background) !important;
  --gc-analysis-surface: var(--te-card) !important;
  --gc-analysis-border: var(--te-border) !important;
  --gc-analysis-border-strong: color-mix(in oklch, var(--te-border), var(--te-foreground) 14%) !important;
  --gc-analysis-text: var(--te-foreground) !important;
  --gc-analysis-muted: var(--te-muted-foreground) !important;
  --gc-analysis-violet: var(--te-brand) !important;
  --gc-analysis-violet-soft: color-mix(in oklch, var(--te-brand) 12%, var(--te-card)) !important;
  --gc-analysis-orange: var(--te-brand) !important;
  --gc-analysis-orange-soft: color-mix(in oklch, var(--te-brand) 12%, var(--te-card)) !important;
  --gc-analysis-green: var(--te-success) !important;
  --gc-analysis-green-soft: color-mix(in oklch, var(--te-success) 12%, var(--te-card)) !important;
  --gc-analysis-red: var(--te-destructive) !important;
  --gc-analysis-red-soft: color-mix(in oklch, var(--te-destructive) 10%, var(--te-card)) !important;

  /* Tailwind v4 theme variables (they live in @layer theme, so these win). */
  --font-sans: var(--te-font);
  --font-condensed: var(--te-font);
  --font-mono: var(--te-font-mono);
  --font-weight-black: 650;
  --font-weight-extrabold: 600;
  --tracking-wider: 0.04em;
  --tracking-widest: 0.07em;
}

/* Sidebar tokens — skipped in light mode when "Light sidebar color: Black" is chosen,
 * so that option (trygc-sidebar-theme.css) keeps working. */
html:root[data-trygc-page]:not(#gc-te):not([data-trygc-sidebar="black"]),
html:root[data-trygc-page].dark:not(#gc-te) {
  --sidebar: var(--te-sidebar) !important;
  --shadcn-sidebar: var(--te-sidebar) !important;
  --sidebar-foreground: var(--te-sidebar-foreground) !important;
  --shadcn-sidebar-foreground: var(--te-sidebar-foreground) !important;
  --sidebar-primary: var(--te-sidebar-primary) !important;
  --shadcn-sidebar-primary: var(--te-sidebar-primary) !important;
  --sidebar-primary-foreground: var(--te-sidebar-primary-foreground) !important;
  --shadcn-sidebar-primary-foreground: var(--te-sidebar-primary-foreground) !important;
  --sidebar-accent: var(--te-sidebar-accent) !important;
  --shadcn-sidebar-accent: var(--te-sidebar-accent) !important;
  --sidebar-accent-foreground: var(--te-sidebar-accent-foreground) !important;
  --shadcn-sidebar-accent-foreground: var(--te-sidebar-accent-foreground) !important;
  --sidebar-border: var(--te-sidebar-border) !important;
  --shadcn-sidebar-border: var(--te-sidebar-border) !important;
  --sidebar-ring: var(--te-sidebar-ring) !important;
  --shadcn-sidebar-ring: var(--te-sidebar-ring) !important;
  --sidebar-glow: transparent !important;
}

/* 4. Polish */
html[data-trygc-page] body {
  font-family: var(--te-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html[data-trygc-page] :is(button, input, select, textarea, .font-sans) {
  font-family: inherit;
}

html[data-trygc-page] :where(h1, h2, h3, .font-condensed) {
  font-family: var(--te-font);
}

/* trygc-google-ui.css pins .font-black/.font-extrabold to 700 !important; out-rank it. */
html[data-trygc-page]:not(#gc-te) :is(.font-black, .font-extrabold) {
  font-weight: 650 !important;
}

html[data-trygc-page]:not(#gc-te) .gc-app-shell :is(h1, h2, h3) {
  font-weight: 600 !important;
}

.gc-app-shell :is(h1, h2) {
  letter-spacing: -0.025em;
}

.gc-app-shell h3 {
  letter-spacing: -0.01em;
}

/* Sentence-case titles read calmer than shouted ones. */
.gc-app-content :is(h1, h2).uppercase {
  text-transform: none;
}

/* Page ground: flat, no tinted radial washes. */
.gc-app-shell,
.gc-app-content {
  background: var(--te-background);
}

/* Live report shell sets its palette on the element itself (grand-community.css). */
.gc-app-shell .gc-live-shell {
  --gc-live-violet: var(--te-brand);
  --gc-live-orange: var(--te-brand);
  --gc-live-green: var(--te-success);
  --gc-live-red: var(--te-destructive);
  background: var(--te-background);
}

/* Header: quiet translucent bar, no glow line. */
.gc-app-header {
  background: color-mix(in oklch, var(--te-background) 82%, transparent);
  box-shadow: none;
  border-bottom-color: var(--te-border);
}

.gc-app-header > .bg-gradient-to-r {
  display: none;
}

/* Cards: hairline outline, no lift. Shadow comes from the preset (none by default). */
.gc-app-content :is(.rounded-xl, .rounded-2xl, .rounded-3xl):is(.border, .shadow-sm, [class*="shadow-[var(--shadow-card)]"]) {
  box-shadow: var(--te-shadow-card);
}

.gc-app-content .shadow-sm {
  box-shadow: var(--te-shadow-card);
}

.gc-app-content :is(.hover\:shadow-md, .hover\:shadow-lg, .hover\:shadow-xl):hover,
.gc-app-content [class*="hover:shadow-[0_0"]:hover {
  box-shadow: var(--te-shadow-card);
}

.gc-app-content :is(.hover\:-translate-y-0\.5, .hover\:-translate-y-1, .hover\:-translate-y-px):hover {
  translate: none;
}

.gc-app-content :is(.rounded-xl, .rounded-2xl, .rounded-3xl).border:hover {
  border-color: color-mix(in oklch, var(--te-border), var(--te-foreground) 18%);
}

/* Numbers line up in KPI tiles and tables. */
.gc-app-shell :is(table, .tabular-nums) {
  font-variant-numeric: tabular-nums;
}

/* Focus: soft 3px ring on the ring colour (Studio: ring-3 ring-ring/50). */
.gc-app-shell :is(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible,
[role="dialog"] :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--te-ring) 50%, transparent);
}

html[data-trygc-page] ::selection {
  background: color-mix(in oklch, var(--te-brand) 22%, transparent);
  color: var(--te-foreground);
}

.gc-app-shell {
  scrollbar-color: color-mix(in oklch, var(--te-foreground) 18%, transparent) transparent;
}

/* 5. Layout options */
html[data-content-layout="centered"] .gc-app-content .page-enter {
  max-width: 1536px;
}

html[data-content-layout="full-width"] .gc-app-content .page-enter {
  max-width: none;
}

@media (min-width: 1024px) {
  html[data-sidebar-variant="inset"] .gc-app-shell {
    background: var(--sidebar);
  }

  html[data-sidebar-variant="inset"] .gc-app-shell aside {
    border-right-color: transparent;
  }

  html[data-sidebar-variant="inset"] .gc-app-shell > main {
    margin: 8px 8px 8px 0;
    border-radius: calc(var(--te-radius) + 4px);
    border: 1px solid var(--te-border);
    background: var(--te-background);
    box-shadow: var(--te-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
  }

  html[data-sidebar-variant="floating"] .gc-app-shell aside {
    margin: 8px 0 8px 8px;
    height: auto;
    border: 1px solid var(--sidebar-border);
    border-radius: var(--te-radius);
    box-shadow: var(--te-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
  }
}

/* Preferences panel (rendered by trygc-theme-engine.js inside "Customize workspace") */
.gc-te {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--te-border);
  font-family: var(--te-font);
}

.gc-te__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--te-foreground);
}

.gc-te__hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--te-muted-foreground);
}

.gc-te__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gc-te__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--te-foreground);
}

.gc-te__presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.gc-te__preset {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--te-border);
  border-radius: var(--te-radius);
  background: transparent;
  color: var(--te-foreground);
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.gc-te__preset:hover {
  background: var(--te-muted);
}

.gc-te__preset[aria-pressed="true"] {
  border-color: var(--te-foreground);
  background: var(--te-muted);
}

.gc-te__swatch {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--te-foreground) 15%, transparent);
}

.gc-te__select {
  height: 32px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--te-input);
  border-radius: var(--te-radius);
  background: transparent;
  color: var(--te-foreground);
  font: inherit;
  font-size: 12px;
}

.gc-te__select option {
  background: var(--te-popover);
  color: var(--te-popover-foreground);
}

.gc-te__toggle {
  display: flex;
  border: 1px solid var(--te-border);
  border-radius: var(--te-radius);
  overflow: hidden;
}

.gc-te__toggle button {
  flex: 1;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--te-muted-foreground);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.gc-te__toggle button + button {
  border-left: 1px solid var(--te-border);
}

.gc-te__toggle button:hover {
  color: var(--te-foreground);
}

.gc-te__toggle button[aria-pressed="true"] {
  background: var(--te-muted);
  color: var(--te-foreground);
}

.gc-te__reset {
  height: 32px;
  border: 1px solid var(--te-border);
  border-radius: var(--te-radius);
  background: transparent;
  color: var(--te-foreground);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.gc-te__reset:hover {
  background: var(--te-muted);
}

html.gc-te-switching,
html.gc-te-switching * {
  transition: none !important;
}

/* 6. Ops Agent (/op-agent.html) — a standalone page with its own --ag-* tokens.
 * It is outside the SPA shell, so it reads the engine through this bridge and
 * gets the floating Appearance button instead of the Customize drawer. */
html:root[data-trygc-page="ops-agent"]:not(#gc-te) {
  --ag-bg: var(--te-background) !important;
  --ag-card: var(--te-card) !important;
  --ag-ink: var(--te-foreground) !important;
  --ag-dim: var(--te-muted-foreground) !important;
  --ag-line: var(--te-border) !important;
  --ag-surf: color-mix(in oklch, var(--te-muted) 65%, var(--te-card)) !important;
  --ag-brand: var(--te-primary) !important;
  --ag-accent: var(--te-brand) !important;
  --ag-good: var(--te-success) !important;
  --ag-bad: var(--te-destructive) !important;
}

html[data-trygc-page="ops-agent"] body {
  font-family: var(--te-font) !important;
}

/* The three places the page paints brand colour literally rather than through a token. */
html[data-trygc-page="ops-agent"] .gc-ag-head {
  background:
    linear-gradient(135deg, color-mix(in oklch, var(--te-primary) 14%, transparent), transparent 52%),
    var(--ag-surf);
}

html[data-trygc-page="ops-agent"] .gc-brain-studio-btn {
  background: linear-gradient(120deg, var(--te-primary), var(--te-brand));
}

html[data-trygc-page="ops-agent"] .gc-ag-message-files span {
  border-color: color-mix(in oklch, currentColor 32%, transparent);
}

/* Same flattening as the shell: one border, a light shadow, engine radius. */
html[data-trygc-page="ops-agent"] :is(.gc-ag-head, .gc-ag-card, .gc-ag-settings-card, .gc-ag-workflow, .gc-ag-composer, .gc-ag-history) {
  border-radius: calc(var(--te-radius) + 6px);
}

html[data-trygc-page="ops-agent"] :is(.gc-ag-pill, .gc-ag-headbtns button, .gc-ag-chip) {
  border-radius: calc(var(--te-radius) + 2px);
}

/* Floating Appearance control, for pages with no Customize workspace drawer. */
.gc-te-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--te-border);
  background: var(--te-card);
  color: var(--te-foreground);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45);
}

.gc-te-fab:hover {
  border-color: var(--te-primary);
}

.gc-te-fab__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--te-primary);
}

.gc-te-pop {
  position: fixed;
  right: 18px;
  bottom: 68px;
  z-index: 61;
  width: min(22rem, calc(100vw - 36px));
  max-height: min(34rem, calc(100dvh - 96px));
  overflow: auto;
  border-radius: 16px;
  border: 1px solid var(--te-border);
  background: var(--te-card);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5);
}

.gc-te-pop[hidden] {
  display: none !important;
}

.gc-te-pop .gc-te {
  border: 0;
  margin: 0;
}

@media (max-width: 600px) {
  .gc-te-fab { right: 12px; bottom: 12px; }
  .gc-te-pop { right: 12px; left: 12px; bottom: 62px; width: auto; }
}

/* 7. Profile hub — its own --ph-* palette (fixed indigo/orange, Plus Jakarta
 * Sans) onto the engine, so the page follows the chosen preset in both modes. */
html[data-trygc-page] .profile-hub,
html[data-trygc-page].dark .profile-hub {
  --ph-bg: var(--te-background);
  --ph-soft: color-mix(in oklch, var(--te-primary) 5%, var(--te-background));
  --ph-panel: var(--te-card);
  --ph-panel-solid: var(--te-card);
  --ph-ink: var(--te-foreground);
  --ph-muted: var(--te-muted-foreground);
  --ph-muted-2: color-mix(in oklch, var(--te-muted-foreground) 75%, var(--te-background));
  --ph-line: var(--te-border);
  --ph-purple: var(--te-primary);
  --ph-purple-2: color-mix(in oklch, var(--te-primary) 72%, var(--te-brand));
  --ph-orange: var(--te-brand);
  --ph-green: var(--te-success);
  --ph-amber: var(--te-warning);
  --ph-red: var(--te-destructive);
  --ph-blue: var(--te-chart-5);
  --ph-green-soft: color-mix(in oklch, var(--te-success) 16%, var(--te-card));
  --ph-amber-soft: color-mix(in oklch, var(--te-warning) 18%, var(--te-card));
  --ph-red-soft: color-mix(in oklch, var(--te-destructive) 14%, var(--te-card));
  --ph-blue-soft: color-mix(in oklch, var(--te-chart-5) 16%, var(--te-card));
  --ph-violet-soft: color-mix(in oklch, var(--te-primary) 14%, var(--te-card));
  --ph-on-brand: var(--te-primary-foreground);
  --ph-shadow: var(--te-shadow-float);
  --ph-shadow-soft: var(--te-shadow-card);
  font-family: var(--te-font);
}

/* The page paints two fixed purple/orange glows and a few literal tints. */
html[data-trygc-page] .profile-hub {
  background:
    radial-gradient(circle at 8% -8%, color-mix(in oklch, var(--te-primary) 16%, transparent), transparent 34%),
    radial-gradient(circle at 94% 0%, color-mix(in oklch, var(--te-brand) 13%, transparent), transparent 32%),
    linear-gradient(180deg, var(--ph-bg), var(--ph-soft));
}

html[data-trygc-page] :is(.ph-badge, .ph-goal, .ph-setting-block) {
  background: color-mix(in oklch, var(--te-muted) 55%, var(--te-card));
}

html[data-trygc-page] .profile-hub :is(h1, h2, h3, .ph-name) {
  font-family: var(--te-font);
}