:root {
  --btn-size-small-px: 1.25rem;  --btn-size-small-py: 0.5rem;   --btn-size-small-fs: calc(var(--brand-shape-button-fontSize, 1.125rem) - 0.125rem);
  --btn-size-medium-px: 1.5rem;  --btn-size-medium-py: 0.75rem; --btn-size-medium-fs: var(--brand-shape-button-fontSize, 1.125rem);
  --btn-size-large-px: 2.5rem;   --btn-size-large-py: 1.25rem;  --btn-size-large-fs: calc(var(--brand-shape-button-fontSize, 1.125rem) + 0.125rem);
}

:root {
  --brand-color-brand-primary: #111827;
  --brand-color-brand-primary-hsl: 221 39% 11%;
  --brand-color-brand-primary-rgb: 17, 24, 39;
  --brand-color-brand-secondary: #6b7280;
  --brand-color-brand-secondary-hsl: 220 9% 46%;
  --brand-color-brand-secondary-rgb: 107, 114, 128;
  --brand-color-brand-accent: #3b82f6;
  --brand-color-brand-accent-hsl: 217 91% 60%;
  --brand-color-brand-accent-rgb: 59, 130, 246;
  --brand-color-semantic-success: #16a34a;
  --brand-color-semantic-success-hsl: 142 76% 36%;
  --brand-color-semantic-success-rgb: 22, 163, 74;
  --brand-color-semantic-warning: #d97706;
  --brand-color-semantic-warning-hsl: 32 95% 44%;
  --brand-color-semantic-warning-rgb: 217, 119, 6;
  --brand-color-semantic-error: #dc2626;
  --brand-color-semantic-error-hsl: 0 72% 51%;
  --brand-color-semantic-error-rgb: 220, 38, 38;
  --brand-color-semantic-info: #0284c7;
  --brand-color-semantic-info-hsl: 200 98% 39%;
  --brand-color-semantic-info-rgb: 2, 132, 199;
  --brand-color-surface-pageBg: #ffffff;
  --brand-color-surface-pageBg-hsl: 0 0% 100%;
  --brand-color-surface-pageBg-rgb: 255, 255, 255;
  --brand-color-surface-cardBg: #ffffff;
  --brand-color-surface-cardBg-hsl: 0 0% 100%;
  --brand-color-surface-cardBg-rgb: 255, 255, 255;
  --brand-color-surface-sectionAlt: #f9fafb;
  --brand-color-surface-sectionAlt-hsl: 210 20% 98%;
  --brand-color-surface-sectionAlt-rgb: 249, 250, 251;
  --brand-color-surface-border: #e5e7eb;
  --brand-color-surface-border-hsl: 220 13% 91%;
  --brand-color-surface-border-rgb: 229, 231, 235;
  --brand-color-surface-darkBg: #2C2A26;
  --brand-color-surface-darkBg-hsl: 40 7% 16%;
  --brand-color-surface-darkBg-rgb: 44, 42, 38;
  --brand-color-text-body: #090909;
  --brand-color-text-body-hsl: 0 0% 4%;
  --brand-color-text-body-rgb: 9, 9, 9;
  --brand-color-text-muted: #666666;
  --brand-color-text-muted-hsl: 0 0% 40%;
  --brand-color-text-muted-rgb: 102, 102, 102;
  --brand-color-text-heading: #1A1A1A;
  --brand-color-text-heading-hsl: 0 0% 10%;
  --brand-color-text-heading-rgb: 26, 26, 26;
  --brand-color-text-headingAccent: #405A63;
  --brand-color-text-headingAccent-hsl: 195 21% 32%;
  --brand-color-text-headingAccent-rgb: 64, 90, 99;
  --brand-color-text-bodyOnDark: #FFFFFF;
  --brand-color-text-bodyOnDark-hsl: 0 0% 100%;
  --brand-color-text-bodyOnDark-rgb: 255, 255, 255;
  --brand-color-text-headingOnDark: #F7F0DE;
  --brand-color-text-headingOnDark-hsl: 43 61% 92%;
  --brand-color-text-headingOnDark-rgb: 247, 240, 222;
  --brand-font-heading: 'Inter';
  --brand-font-body: 'Inter';
  --brand-shape-button-radius: 8px;
  --brand-shape-button-fontSize: 1.125rem;
  --brand-shape-card-radius: 8px;
  --brand-shape-base-radius: 8px;
  --brand-shape-large-radius: 24px;
  --brand-shape-input-radius: 8px;
  --brand-shape-input-fontSize: 1rem;
  --brand-shape-input-paddingY: 0.5rem;
  --brand-shape-input-paddingX: 0.75rem;
  --brand-shape-input-focusRingWidth: 2px;
  --brand-shape-input-labelFontSize: 1rem;
  --brand-shape-input-labelGap: 0.25rem;
  --brand-shape-input-fieldGap: 1rem;
  --brand-shape-input-textareaMinHeight: 4rem;
  --brand-spacing-density: 4rem;
  --brand-shadow-elevation: 0 1px 2px rgba(26,26,26,0.06), 0 1px 4px rgba(26,26,26,0.04);
  --brand-website-header-logoSize: Medium;
  --brand-website-header-mobileMenu: Drawer;
  --brand-website-hero-overlayEnabled: false;
  --brand-website-hero-overlayColor: #1A1A1A;
  --brand-website-hero-overlayColor-hsl: 0 0% 10%;
  --brand-website-hero-overlayColor-rgb: 26, 26, 26;
  --brand-website-hero-overlayOpacity: 40;
  --brand-website-hero-textColor: Dark;
  --brand-website-hero-gradient: None;
  --brand-website-section-darkBg: #2C2A26;
  --brand-website-section-darkBg-hsl: 40 7% 16%;
  --brand-website-section-darkBg-rgb: 44, 42, 38;
  --brand-website-footer-bgTone: Dark;
  --brand-website-footer-showSocial: true;
  --brand-website-footer-socialStyle: Outline;
  --brand-website-footer-columns: 3;
  --brand-website-blog-bodySize: Default;
  --brand-website-blog-codeStyle: Light;
  --brand-website-blog-blockquoteStyle: Left border;
  --brand-website-images-radius: 8px;
  --brand-website-images-border-width: 0;
  --brand-website-images-shadow: 0 1px 2px rgba(26,26,26,0.06), 0 1px 4px rgba(26,26,26,0.04);
  --brand-website-images-hoverEffect: None;
}

/* Per-selection token-aware styling */
.tus-color-brand-primary { color: var(--brand-color-brand-primary) }
.tus-color-brand-secondary { color: var(--brand-color-brand-secondary) }
.tus-color-brand-accent { color: var(--brand-color-brand-accent) }
.tus-color-semantic-success { color: var(--brand-color-semantic-success) }
.tus-color-semantic-warning { color: var(--brand-color-semantic-warning) }
.tus-color-semantic-error { color: var(--brand-color-semantic-error) }
.tus-color-semantic-info { color: var(--brand-color-semantic-info) }
.tus-color-surface-pageBg { color: var(--brand-color-surface-pageBg) }
.tus-color-surface-cardBg { color: var(--brand-color-surface-cardBg) }
.tus-color-surface-sectionAlt { color: var(--brand-color-surface-sectionAlt) }
.tus-color-surface-border { color: var(--brand-color-surface-border) }
.tus-color-surface-darkBg { color: var(--brand-color-surface-darkBg) }
.tus-color-text-body { color: var(--brand-color-text-body) }
.tus-color-text-muted { color: var(--brand-color-text-muted) }
.tus-color-text-heading { color: var(--brand-color-text-heading) }
.tus-color-text-headingAccent { color: var(--brand-color-text-headingAccent) }
.tus-color-text-bodyOnDark { color: var(--brand-color-text-bodyOnDark) }
.tus-color-text-headingOnDark { color: var(--brand-color-text-headingOnDark) }

.tus-weight-bold { font-weight: bold }
.tus-style-italic { font-style: italic }
.tus-decor-underline { text-decoration: underline }
.tus-decor-strikethrough { text-decoration: line-through }


/* Popup brand vars */
.pop-canvas {
  --pc-primary: #111827;
  --pc-primary-2: #000000;
  --pc-teal: #6b7280;
  --pc-accent: #111827;
  --pc-text: #090909;
  --pc-muted: #666666;
  --pc-surface: #ffffff;
  --pc-heading: #1A1A1A;
  --pc-divider: #405A63;
  --pc-btn-bg: #3b82f6;
  --pc-btn-text: #111827;
  --pc-btn-border: #111827;
  --pc-radius-card: 8px;
  --pc-radius-btn: 8px;
  --pc-font-head: 'Inter';
  --pc-font-body: 'Inter';
}


/* Popup tus-* scoped overrides */
.pop-canvas .tus-weight-bold         { font-weight: bold }
.pop-canvas .tus-style-italic        { font-style: italic }
.pop-canvas .tus-decor-underline     { text-decoration: underline }
.pop-canvas .tus-decor-strikethrough { text-decoration: line-through }
.pop-canvas .tus-color-brand-primary { color: var(--pc-primary) }
.pop-canvas .tus-color-brand-secondary { color: var(--pc-teal) }
.pop-canvas .tus-color-brand-accent { color: var(--pc-accent) }
.pop-canvas .tus-color-semantic-success { color: var(--brand-color-semantic-success) }
.pop-canvas .tus-color-semantic-warning { color: var(--brand-color-semantic-warning) }
.pop-canvas .tus-color-semantic-error { color: var(--brand-color-semantic-error) }
.pop-canvas .tus-color-semantic-info { color: var(--brand-color-semantic-info) }
.pop-canvas .tus-color-surface-pageBg { color: var(--brand-color-surface-pageBg) }
.pop-canvas .tus-color-surface-cardBg { color: var(--pc-surface) }
.pop-canvas .tus-color-surface-sectionAlt { color: var(--brand-color-surface-sectionAlt) }
.pop-canvas .tus-color-surface-border { color: var(--brand-color-surface-border) }
.pop-canvas .tus-color-surface-darkBg { color: var(--brand-color-surface-darkBg) }
.pop-canvas .tus-color-text-body { color: var(--pc-text) }
.pop-canvas .tus-color-text-muted { color: var(--pc-muted) }
.pop-canvas .tus-color-text-heading { color: var(--pc-heading) }
.pop-canvas .tus-color-text-headingAccent { color: var(--pc-divider) }
.pop-canvas .tus-color-text-bodyOnDark { color: var(--brand-color-text-bodyOnDark) }
.pop-canvas .tus-color-text-headingOnDark { color: var(--brand-color-text-headingOnDark) }
.pop-canvas .tus-font-inter { font-family: "Inter", sans-serif }
.pop-canvas .tus-font-inter { font-family: "Inter", sans-serif }
/* tus-size-* rules require size-scale — emitted by brand-tokens.css/route.ts */