/* Polytweaks semantic design tokens. Shared by Angular and local static pages.
 * Literal design values belong here; consumers use roles and compatible aliases. */
:root {
  --app-font-body: 'General Sans', 'Inter var', ui-sans-serif, system-ui, sans-serif;
  --app-font-heading: 'Polytweaks Heading Web', 'Chakra Petch', 'General Sans', ui-sans-serif, system-ui, sans-serif;
  --app-font-mono: 'Polytweaks Mono Web', 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  --app-type-caption: 0.6875rem;
  --app-type-small: 0.75rem;
  --app-type-control: 0.8125rem;
  --app-type-body: 0.875rem;
  --app-type-body-large: 1rem;
  --app-type-subheading: 1.125rem;
  --app-type-section: 1.25rem;
  --app-type-dialog: 1.5rem;
  --app-type-title: 1.875rem;
  --app-type-display: 2.5rem;
  --app-type-stat: 3rem;
  --app-type-display-large: 4rem;
  --app-leading-body: 1.6;
  --app-leading-control: 1.4;
  --app-leading-heading: 1.2;
  --app-weight-body: 400;
  --app-weight-medium: 500;
  --app-weight-emphasis: 600;
  --app-tracking-heading: -0.015em;
  --app-tracking-control: 0.04em;
  --app-tracking-label: 0.12em;
  --app-space-xs: 0.25rem;
  --app-space-sm: 0.5rem;
  --app-space-md: 0.75rem;
  --app-space-lg: 1rem;
  --app-space-xl: 1.5rem;
  --app-space-2xl: 2rem;
  --app-space-3xl: 3rem;
  --app-control-height: 2.75rem;
  --app-control-height-compact: 2.25rem;
  --app-control-padding: 1.25rem;
  --app-page-padding-x: var(--app-space-xl);
  --app-page-header-min-height: calc(var(--app-control-height) + var(--app-space-md) + var(--app-space-md) + 1px);
}
@media (min-width: 640px) {
  :root { --app-page-padding-x: 2.5rem; }
}
:root,
body.dark {
  --app-control-radius: 0px;
  color-scheme: dark;
  --viewer-stage-bg-top: #171a21;
  --viewer-stage-bg-middle: #242832;
  --viewer-stage-bg-bottom: #303541;
  --viewer-stage-floor: #303541;
  --viewer-stage-shadow: #030406;
  --viewer-stage-shadow-opacity: 0.45;
  --app-surface-shell: #080a0f;
  --app-surface-panel: #10141d;
  --app-surface-raised: #141923;
  --app-surface-raised-rgb: 20, 25, 35;
  --app-surface-soft: #0d1119;
  --app-surface-field: #0b0f17;
  --app-surface-hover: #1c2630;
  --app-surface-selected: #173528;
  --app-skeleton-base: #27313e;
  --app-skeleton-highlight: #394555;
  --app-text-primary-rgb: 241, 245, 249;
  --app-text-secondary-rgb: 176, 190, 207;
  --app-text-muted-rgb: 157, 173, 191;
  --app-text-accent-rgb: 133, 232, 180;
  --app-brand-rgb: 87, 190, 135;
  --app-border-rgb: 148, 163, 184;
  --app-border-subtle: #303a46;
  --app-border-default: #3e4a58;
  --app-border-control: #7d8c9e;
  --app-focus: #85e8b4;
  --app-shadow-rgb: 2, 6, 23;
  --app-highlight-rgb: 255, 255, 255;
  --app-action-fill: #f8fafc;
  --app-action-fill-hover: #dbe8e1;
  --app-action-on-fill: #101b15;
  --app-success-rgb: 133, 232, 180;
  --app-success-text: #85e8b4;
  --app-success-bg: #142e22;
  --app-success-border: #4ca876;
  --app-warning-rgb: 253, 211, 109;
  --app-warning-text: #fdd36d;
  --app-warning-bg: #352a12;
  --app-warning-border: #b79548;
  --app-danger-rgb: 253, 164, 175;
  --app-danger-text: #fda4af;
  --app-danger-bg: #351820;
  --app-danger-border: #c56978;
  --app-info-rgb: 147, 197, 253;
  --app-info-text: #93c5fd;
  --app-info-bg: #142b43;
  --app-info-border: #6297cf;
  --app-annotation-rgb: 99, 102, 241;
  --app-annotation-strong-rgb: 79, 70, 229;
  --app-annotation-text-rgb: 196, 181, 253;
  --app-switch-track: #10141d;
  --app-switch-thumb: #c5d2df;
  --app-switch-on-track: #183c2b;
  --app-switch-on-thumb: #85e8b4;
  --app-danger-fill: #a51d35;
  --app-danger-fill-hover: #86172b;
  --app-danger-on-fill: #ffffff;
  --app-qr-surface: #ffffff;
}

body.light {
  color-scheme: light;
  --viewer-stage-bg-top: #f7f5f2;
  --viewer-stage-bg-middle: #eae7e1;
  --viewer-stage-bg-bottom: #dcd8d1;
  --viewer-stage-floor: #e6e3dd;
  --viewer-stage-shadow: #302923;
  --viewer-stage-shadow-opacity: 0.3;
  --app-surface-shell: #f6f8f5;
  --app-surface-panel: #ffffff;
  --app-surface-raised: #ffffff;
  --app-surface-raised-rgb: 255, 255, 255;
  --app-surface-soft: #edf2ec;
  --app-surface-field: #ffffff;
  --app-surface-hover: #e7eee7;
  --app-surface-selected: #dcebdd;
  --app-skeleton-base: #dce5de;
  --app-skeleton-highlight: #f0f4f1;
  --app-text-primary-rgb: 27, 42, 36;
  --app-text-secondary-rgb: 70, 90, 79;
  --app-text-muted-rgb: 82, 100, 90;
  --app-text-accent-rgb: 18, 97, 62;
  --app-brand-rgb: 26, 130, 83;
  --app-border-rgb: 33, 67, 48;
  --app-border-subtle: #d2ddd5;
  --app-border-default: #b7c6bc;
  --app-border-control: #687d70;
  --app-focus: #12613e;
  --app-shadow-rgb: 32, 53, 38;
  --app-highlight-rgb: 255, 255, 255;
  --app-action-fill: #17835c;
  --app-action-fill-hover: #116b49;
  --app-action-on-fill: #ffffff;
  --app-success-rgb: 18, 97, 62;
  --app-success-text: #12613e;
  --app-success-bg: #e4f1e9;
  --app-success-border: #56896a;
  --app-warning-rgb: 122, 74, 9;
  --app-warning-text: #7a4a09;
  --app-warning-bg: #fff1ce;
  --app-warning-border: #98731d;
  --app-danger-rgb: 156, 29, 50;
  --app-danger-text: #9c1d32;
  --app-danger-bg: #fce8eb;
  --app-danger-border: #ae5665;
  --app-info-rgb: 30, 77, 130;
  --app-info-text: #1e4d82;
  --app-info-bg: #e7f0fc;
  --app-info-border: #577fae;
  --app-annotation-text-rgb: 69, 49, 147;
  --app-switch-track: #ffffff;
  --app-switch-thumb: #5a6e61;
  --app-switch-on-track: #dcebdd;
  --app-switch-on-thumb: #12613e;
}

/* These aliases are deliberately declared on each theme owner so that custom
 * property references resolve against that owner's palette, including overlays. */
:root,
body.dark,
body.light,
body.dark.theme-default,
body.light.theme-default {
  --app-text-primary: rgb(var(--app-text-primary-rgb));
  --app-text-secondary: rgb(var(--app-text-secondary-rgb));
  --app-text-muted: rgb(var(--app-text-muted-rgb));
  --app-text-accent: rgb(var(--app-text-accent-rgb));
  --app-accent-secondary-rgb: var(--app-annotation-rgb);
  --app-accent-secondary-strong-rgb: var(--app-annotation-strong-rgb);
  --app-accent-secondary-text-rgb: var(--app-annotation-text-rgb);
  --app-accent-warm-rgb: var(--app-warning-rgb);
  --app-shadow-soft: 0 8px 20px rgba(var(--app-shadow-rgb), .08);
  --app-shadow-panel: 0 18px 36px rgba(var(--app-shadow-rgb), .14);
  --app-shadow-overlay: 0 24px 70px rgba(var(--app-shadow-rgb), .2);
  --app-backdrop: rgba(var(--app-shadow-rgb), .48);
  --app-focus-ring: 0 0 0 2px var(--app-surface-panel), 0 0 0 4px var(--app-focus);
  --bp-accent: var(--app-brand-rgb);
  --bp-accent-light: var(--app-text-accent-rgb);
  --bp-hairline: var(--app-border-subtle);
  --bp-hairline-strong: var(--app-border-default);
  --fuse-text-default: var(--app-text-primary);
  --fuse-text-default-rgb: var(--app-text-primary-rgb);
  --fuse-text-secondary: var(--app-text-secondary);
  --fuse-text-secondary-rgb: var(--app-text-secondary-rgb);
  --fuse-text-hint: var(--app-text-muted);
  --fuse-text-hint-rgb: var(--app-text-muted-rgb);
  --fuse-warn-rgb: var(--app-danger-rgb);
  --poly-text: var(--app-text-primary);
  --poly-muted: var(--app-text-secondary);
  --poly-accent: var(--app-text-accent);
  --poly-panel: var(--app-surface-panel);
  --poly-field: var(--app-surface-field);
  --poly-soft: var(--app-surface-soft);
  --poly-error: var(--app-danger-text);
  --app-shell-surface-base: var(--app-surface-shell);
  --app-shell-surface-dark: var(--app-surface-shell);
  --app-dark-surface-shell: var(--app-surface-shell);
  --app-dark-surface-glass: rgba(var(--app-surface-raised-rgb), .85);
  --app-dark-surface-overlay: var(--app-surface-raised);
  --app-dark-surface-overlay-strong: var(--app-surface-raised);
  --app-dark-surface-card: var(--app-surface-panel);
  --app-dark-surface-card-soft: var(--app-surface-soft);
  --app-dark-surface-card-strong: var(--app-surface-raised);
  --app-dark-surface-panel: var(--app-surface-panel);
  --app-dark-surface-panel-strong: var(--app-surface-raised);
  --app-dark-surface-field: var(--app-surface-field);
  --app-dark-border-subtle: var(--app-border-subtle);
  --app-dark-border-default: var(--app-border-default);
  --app-dark-border-strong: var(--app-border-control);
  --app-dark-border-contrast: var(--app-focus);
  --app-dark-divider: var(--app-border-subtle);
  --app-dark-divider-strong: var(--app-border-default);
  --app-dark-text-primary: var(--app-text-primary);
  --app-dark-text-secondary: var(--app-text-secondary);
  --app-dark-text-tertiary: var(--app-text-muted);
  --app-attachment-surface: var(--app-surface-panel);
  --app-attachment-surface-strong: var(--app-surface-raised);
  --app-attachment-border: var(--app-border-default);
  --app-attachment-border-strong: var(--app-border-control);
  --app-attachment-text: var(--app-text-primary);
  --app-attachment-muted: var(--app-text-secondary);
  --app-attachment-shadow: var(--app-shadow-soft);
  --app-attachment-shadow-hover: var(--app-shadow-panel);
  --app-attachment-dropzone-bg: var(--app-surface-soft);
  --app-attachment-dropzone-bg-active: var(--app-surface-selected);
  --app-action-primary-bg: var(--app-surface-panel);
  --app-action-primary-bg-hover: var(--app-action-fill-hover);
  --app-action-primary-border: var(--app-border-control);
  --app-action-primary-text: var(--app-text-secondary);
  --app-action-primary-text-hover: var(--app-action-on-fill);
  --app-action-secondary-bg: var(--app-surface-panel);
  --app-action-secondary-bg-hover: var(--app-surface-hover);
  --app-action-secondary-border: var(--app-border-control);
  --app-action-secondary-text: var(--app-text-primary);
  --app-action-ghost-bg: transparent;
  --app-action-ghost-bg-hover: var(--app-surface-hover);
  --app-action-ghost-border: var(--app-border-default);
  --app-action-ghost-text: var(--app-text-primary);
  --app-action-accent-bg: var(--app-success-bg);
  --app-action-accent-bg-hover: var(--app-surface-selected);
  --app-action-accent-border: var(--app-success-border);
  --app-action-accent-text: var(--app-success-text);
  --app-action-asset-bg: var(--app-warning-bg);
  --app-action-asset-bg-hover: var(--app-warning-bg);
  --app-action-asset-border: var(--app-warning-border);
  --app-action-asset-text: var(--app-warning-text);
  --app-action-danger-bg: var(--app-danger-fill);
  --app-action-danger-bg-hover: var(--app-danger-fill-hover);
  --app-action-danger-border: var(--app-danger-border);
  --app-action-danger-text: var(--app-danger-on-fill);
  --classy-shell-surface: var(--app-surface-shell);
  --classy-rail-surface: var(--app-surface-soft);
  --classy-rail-surface-hover: var(--app-surface-hover);
  --classy-active-green: rgb(var(--app-brand-rgb));
  --classy-active-green-light: var(--app-text-accent);
  --app-action-disabled-bg: var(--app-surface-soft);
  --app-action-disabled-border: var(--app-border-default);
  --app-action-disabled-text: var(--app-text-muted);
  --app-form-validation-text: var(--app-danger-text);
  --viewer-theme-shell-bg: var(--app-surface-shell);
  --viewer-theme-header-bg: var(--app-surface-panel);
  --viewer-theme-surface: var(--app-surface-panel);
  --viewer-theme-surface-strong: var(--app-surface-raised);
  --viewer-theme-surface-soft: var(--app-surface-soft);
  --viewer-theme-surface-active: var(--app-surface-selected);
  --viewer-theme-border: var(--app-border-default);
  --viewer-theme-border-strong: var(--app-border-control);
  --viewer-theme-divider: var(--app-border-subtle);
  --viewer-theme-text: var(--app-text-primary);
  --viewer-theme-text-strong: var(--app-text-primary);
  --viewer-theme-text-muted: var(--app-text-secondary);
  --viewer-theme-text-subtle: var(--app-text-muted);
  --viewer-theme-shadow: var(--app-shadow-panel);
  --viewer-theme-shadow-strong: var(--app-shadow-overlay);
  --viewer-theme-shadow-soft: var(--app-shadow-soft);
  --viewer-theme-backdrop: var(--app-backdrop);
  --viewer-theme-backdrop-strong: var(--app-backdrop);
  --viewer-theme-input-bg: var(--app-surface-field);
  --viewer-theme-input-border: var(--app-border-control);
  --viewer-theme-input-text: var(--app-text-primary);
  --viewer-theme-input-placeholder: var(--app-text-secondary);
  --viewer-theme-glass-bg: rgba(var(--app-surface-raised-rgb), .82);
  --viewer-theme-glass-border: rgba(var(--app-border-rgb), .32);
  --viewer-theme-glass-shadow: 0 6px 20px rgba(var(--app-shadow-rgb), .12);
  --viewer-theme-warning-bg: var(--app-warning-bg);
  --viewer-theme-warning-border: var(--app-warning-border);
  --viewer-theme-warning-text: var(--app-warning-text);
  --viewer-theme-success-bg: var(--app-success-bg);
  --viewer-theme-success-border: var(--app-success-border);
  --viewer-theme-success-text: var(--app-success-text);
  --viewer-theme-danger-bg: var(--app-danger-bg);
  --viewer-theme-danger-border: var(--app-danger-border);
  --viewer-theme-danger-text: var(--app-danger-text);
  --viewer-theme-info-bg: var(--app-info-bg);
  --viewer-theme-info-border: var(--app-info-border);
  --viewer-theme-info-text: var(--app-info-text);
}

body {
  background: var(--app-surface-shell);
  color: var(--app-text-primary);
}