/* Generated by sync_site_tokens.py from changes/2026-10-21-tbox-ai-upgrade/design-tokens.json. */
/* Shared generated palette. Website-only extensions below are maintained here; preserve on regeneration. */
:root {
  color-scheme: dark;
  --tbox-background: #10191F;
  --tbox-bg: var(--tbox-background);
  --tbox-surface: #18252C;
  --surface: var(--tbox-surface);
  --tbox-surface-raised: #203139;
  --tbox-raised: var(--tbox-surface-raised);
  --raised: var(--tbox-raised);
  --tbox-border: #6E8B80;
  --tbox-line: var(--tbox-border);
  --line: var(--tbox-line);
  --tbox-text-primary: #F3F1E9;
  --tbox-text: var(--tbox-text-primary);
  --text: var(--tbox-text);
  --tbox-text-secondary: #BDCAC7;
  --tbox-muted: var(--tbox-text-secondary);
  --muted: var(--tbox-muted);
  --tbox-text-tertiary: #A7BCB5;
  --tbox-faint: var(--tbox-text-tertiary);
  --faint: var(--tbox-faint);
  --tbox-accent: #0C8F68;
  --accent: var(--tbox-accent);
  --tbox-accent-on: #000000;
  --accent-on: var(--tbox-accent-on);
  --tbox-accent-text: #71D9B4;
  --accent-text: var(--tbox-accent-text);
  --tbox-success: #0C8F68;
  --success: var(--tbox-success);
  --tbox-warning: #F0BF79;
  --warning: var(--tbox-warning);
  --tbox-danger: #F28E89;
  --danger: var(--tbox-danger);
  --tbox-focus: #00D2FF;
  --focus: var(--tbox-focus);
  --tbox-scrim: #071015CC;
  --scrim: var(--tbox-scrim);
  --tbox-accent-soft: #1B3A33;
  --accent-soft: var(--tbox-accent-soft);
  --tbox-success-soft: #16342A;
  --success-soft: var(--tbox-success-soft);
  --tbox-warning-soft: #3A2E19;
  --warning-soft: var(--tbox-warning-soft);
  --tbox-danger-soft: #3A2024;
  --danger-soft: var(--tbox-danger-soft);
  --tbox-info: #79C7EF;
  --info: var(--tbox-info);
  --tbox-info-soft: #17303B;
  --info-soft: var(--tbox-info-soft);
  --tbox-space-1: 4px;
  --tbox-space-2: 8px;
  --tbox-space-3: 12px;
  --tbox-space-4: 16px;
  --tbox-space-5: 24px;
  --tbox-space-6: 32px;
  --tbox-space-7: 48px;
  --tbox-radius-sm: 8px;
  --tbox-radius-md: 12px;
  --tbox-radius-lg: 20px;
  --tbox-radius-pill: 999px;
  --tbox-font-xs: 12px;
  --tbox-leading-xs: 18px;
  --tbox-font-sm: 14px;
  --tbox-leading-sm: 22px;
  --tbox-font-base: 16px;
  --tbox-leading-base: 24px;
  --tbox-font-md: 18px;
  --tbox-leading-md: 28px;
  --tbox-font-lg: 24px;
  --tbox-leading-lg: 32px;
  --tbox-font-xl: 32px;
  --tbox-leading-xl: 40px;
  --tbox-shadow-low: 0 4px 12px #07101518;
  --tbox-shadow-medium: 0 12px 32px #07101526;
  --tbox-shadow-high: 0 24px 64px #07101538;
  --tbox-border-thin: 1px;
  --tbox-border-strong: 2px;
  --tbox-focus-width: 2px;
  --tbox-focus-offset: 3px;
  --tbox-shell-max: 1500px;
  --tbox-shell-max: 1500px;
  --tbox-sidebar: 192px;
  --tbox-summary: 280px;
  --tbox-plan-min-height: 244px;
  --tbox-button-min-height: 48px;
  --tbox-dialog-max: 420px;
  --tbox-viewport-gutter: 32px;
  --brand: var(--tbox-accent);
  --brand-2: var(--tbox-accent-text);
  --bg-elev: var(--tbox-raised);
  --panel: var(--tbox-surface);
  --raised: var(--tbox-raised);
  --stroke: color-mix(in srgb, var(--tbox-line) 36%, transparent);
  --stroke-hi: color-mix(in srgb, var(--tbox-line) 70%, transparent);
  --text-dim: var(--tbox-muted);
  --action: var(--tbox-accent-text);
  --r8: var(--tbox-radius-sm);
  --r12: var(--tbox-radius-md);
  --shadow-sm: var(--tbox-shadow-low);
  --shadow-lg: var(--tbox-shadow-high);
  --font-family: system-ui,-apple-system,Segoe UI,Microsoft YaHei,sans-serif;
}
[data-theme=light] {
  color-scheme: light;
  --tbox-background: #F5F7F3;
  --tbox-bg: var(--tbox-background);
  --tbox-surface: #FFFFFF;
  --surface: var(--tbox-surface);
  --tbox-surface-raised: #EDF2EE;
  --tbox-raised: var(--tbox-surface-raised);
  --raised: var(--tbox-raised);
  --tbox-border: #6E8B80;
  --tbox-line: var(--tbox-border);
  --line: var(--tbox-line);
  --tbox-text-primary: #16282C;
  --tbox-text: var(--tbox-text-primary);
  --text: var(--tbox-text);
  --tbox-text-secondary: #465C5F;
  --tbox-muted: var(--tbox-text-secondary);
  --muted: var(--tbox-muted);
  --tbox-text-tertiary: #506968;
  --tbox-faint: var(--tbox-text-tertiary);
  --faint: var(--tbox-faint);
  --tbox-accent: #0B3D32;
  --accent: var(--tbox-accent);
  --tbox-accent-on: #FFFFFF;
  --accent-on: var(--tbox-accent-on);
  --tbox-accent-text: #0B3D32;
  --accent-text: var(--tbox-accent-text);
  --tbox-success: #176F55;
  --success: var(--tbox-success);
  --tbox-warning: #91601A;
  --warning: var(--tbox-warning);
  --tbox-danger: #AB4145;
  --danger: var(--tbox-danger);
  --tbox-focus: #00D2FF;
  --focus: var(--tbox-focus);
  --tbox-scrim: #10202599;
  --scrim: var(--tbox-scrim);
  --tbox-accent-soft: #DCEBE3;
  --accent-soft: var(--tbox-accent-soft);
  --tbox-success-soft: #DFF0E8;
  --success-soft: var(--tbox-success-soft);
  --tbox-warning-soft: #FBEFD9;
  --warning-soft: var(--tbox-warning-soft);
  --tbox-danger-soft: #FBE4E4;
  --danger-soft: var(--tbox-danger-soft);
  --tbox-info: #1B6B87;
  --info: var(--tbox-info);
  --tbox-info-soft: #DEEFF6;
  --info-soft: var(--tbox-info-soft);
  --brand: var(--tbox-accent);
  --brand-2: var(--tbox-accent-text);
  --bg-elev: var(--tbox-raised);
  --panel: var(--tbox-surface);
  --raised: var(--tbox-raised);
  --stroke: color-mix(in srgb, var(--tbox-line) 36%, transparent);
  --stroke-hi: color-mix(in srgb, var(--tbox-line) 70%, transparent);
  --text-dim: var(--tbox-muted);
  --action: var(--tbox-accent);
}
/* Token-driven visual bridge: keeps the existing DOM/classes intact. */
body.design-upgrade { background: var(--tbox-bg); color: var(--tbox-text); font-family: var(--font-family); }
body.design-upgrade h1, body.design-upgrade .hero h1 em { background: linear-gradient(135deg, var(--tbox-text-primary), var(--tbox-accent-text)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
body.design-upgrade .hero::before { background: radial-gradient(ellipse at 18% 18%, color-mix(in srgb, var(--tbox-accent) 40%, transparent), transparent 43%), radial-gradient(ellipse at 80% 22%, color-mix(in srgb, var(--tbox-accent-text) 26%, transparent), transparent 40%); }
body.design-upgrade .hero-card { background: linear-gradient(145deg, color-mix(in srgb, var(--tbox-accent) 22%, transparent), var(--tbox-surface)); }
body.design-upgrade .brand::before { border-color: color-mix(in srgb, var(--tbox-accent) 60%, transparent); background: color-mix(in srgb, var(--tbox-accent) 20%, var(--tbox-surface)); box-shadow: var(--tbox-shadow-low); }
body.design-upgrade .nav { background: color-mix(in srgb, var(--tbox-bg) 92%, transparent); border-bottom-color: var(--stroke); }
body.design-upgrade .brand span, body.design-upgrade .eyebrow, body.design-upgrade .section-kicker, body.design-upgrade .card-number { color: var(--tbox-accent-text); }
body.design-upgrade .btn.primary, body.design-upgrade .hero .actions .btn.primary, body.design-upgrade .pricing .btn.primary, body.design-upgrade #buy-pending .btn.primary { background: linear-gradient(135deg, var(--tbox-accent), var(--tbox-accent-text)); border-color: transparent; color: var(--site-white); }
body.design-upgrade .btn.primary:hover { filter: brightness(1.08); background: var(--tbox-accent); }
body.design-upgrade .card, body.design-upgrade .panel, body.design-upgrade .hero-card, body.design-upgrade .plan-card { background: var(--tbox-surface); border-color: var(--stroke); box-shadow: var(--tbox-shadow-medium); }
body.design-upgrade .price.recommended, body.design-upgrade .plan-card.recommended { background: var(--tbox-raised); border: var(--tbox-border-strong) solid var(--tbox-accent); box-shadow: var(--tbox-shadow-medium); }
body.design-upgrade .price .tag, body.design-upgrade .plan-card .tag { color: var(--tbox-accent-text); background: color-mix(in srgb, var(--tbox-accent) 14%, transparent); border-color: var(--tbox-accent); }
body.design-upgrade .hero-facts li { background: color-mix(in srgb, var(--tbox-accent) 12%, transparent); }
body.design-upgrade .plan-card .benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tbox-space-2); color: var(--tbox-text-secondary); }
body.design-upgrade .plan-card .benefits li::before { content: '✓'; color: var(--tbox-accent-text); margin-right: var(--tbox-space-2); font-weight: 700; }
body.design-upgrade .plan-card .btn { width: 100%; min-height: var(--tbox-button-min-height, 48px); }
body.design-upgrade .membership-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--tbox-space-4); padding: var(--tbox-space-4); border: var(--tbox-border-thin) solid var(--stroke); border-radius: var(--tbox-radius-md); background: var(--tbox-surface); }
body.design-upgrade .membership-summary strong { color: var(--tbox-text-primary); }
body.design-upgrade .membership-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tbox-space-4); align-items: stretch; }
body.design-upgrade .plan-card { min-height: var(--tbox-plan-min-height, 244px); display: flex; flex-direction: column; gap: var(--tbox-space-3); padding: var(--tbox-space-5); border-radius: var(--tbox-radius-md); position: relative; }
body.design-upgrade .plan-card .amount { font-size: var(--tbox-font-xl); line-height: var(--tbox-leading-xl); font-weight: 700; color: var(--tbox-text-primary); }
body.design-upgrade .plan-card .cta { margin-top: auto; }
body.design-upgrade .page-shell { width: min(var(--tbox-shell-max), calc(100% - 2 * var(--tbox-viewport-gutter))); margin-inline: auto; }
body.design-upgrade :focus-visible { outline: var(--tbox-focus-width) solid var(--tbox-focus); outline-offset: var(--tbox-focus-offset); }
@media (max-width: 600px) { body.design-upgrade .membership-grid { grid-template-columns: 1fr; } body.design-upgrade .membership-summary { align-items: flex-start; flex-direction: column; } body.design-upgrade .page-shell { width: min(100% - 32px, var(--tbox-shell-max)); } }

/* Website semantic colors and compatibility colors pinned by existing visual checks. */
:root {
  --site-legacy-muted: #A7B0C4;
  --site-link-hover: #9BE7CF;
  --site-white: #FFFFFF;
  --site-black: #000000;
  --site-shadow-ink: #071015;
  --site-action-ink: #0B201A;
  --site-window-close: #FF5F57;
  --site-window-minimize: #FEBC2E;
  --site-window-expand: #28C840;
  --site-clear: transparent;
  --site-grid-line: color-mix(in srgb, var(--tbox-text-primary) 9%, transparent);
  --site-inset-line: color-mix(in srgb, var(--tbox-text-primary) 6%, transparent);
}

/* RGB channel tokens retain the legacy getComputedStyle rgba serialization. */
:root {
  --site-black-rgb: 0, 0, 0;
  --site-legacy-muted-rgb: 167, 176, 196;
  --site-link-hover-rgb: 155, 231, 207;
  --site-shadow-ink-rgb: 7, 16, 21;
  --site-white-rgb: 255, 255, 255;
  --tbox-accent-rgb: 12, 143, 104;
  --tbox-accent-text-rgb: 113, 217, 180;
  --tbox-background-rgb: 16, 25, 31;
  --tbox-success-rgb: 12, 143, 104;
  --tbox-surface-rgb: 24, 37, 44;
  --tbox-text-primary-rgb: 243, 241, 233;
}
[data-theme=light] {
  --tbox-accent-rgb: 11, 61, 50;
  --tbox-accent-text-rgb: 11, 61, 50;
  --tbox-background-rgb: 245, 247, 243;
  --tbox-success-rgb: 23, 111, 85;
  --tbox-surface-rgb: 255, 255, 255;
  --tbox-text-primary-rgb: 22, 40, 44;
}

/* Homepage product palette: warm white, ink green, restrained orange action. */
body.design-upgrade { --tbox-background:#f7f5ef; --tbox-bg:#f7f5ef; --tbox-surface:#fffefa; --tbox-surface-raised:#eef5ef; --tbox-text-primary:#19352e; --tbox-text-secondary:#526660; --tbox-text-tertiary:#6a7d75; --tbox-accent:#0b5a47; --tbox-accent-text:#0b5a47; --tbox-border:#b9cbc1; --tbox-line:#b9cbc1; --tbox-warning:#b45c24; --tbox-accent-soft:#dfeee5; }