.btn-primary{background:var(--color-primary);color:var(--color-on-primary);height:48px;padding:0 var(--space-lg);font-size:16px;font-weight:600;letter-spacing:-.01em;border-radius:var(--rounded-pill)}.btn-primary:hover:not(:disabled){background:var(--color-ink);box-shadow:var(--shadow-3)}.btn-primary:active:not(:disabled){transform:scale(.97)}.btn-secondary{background:var(--color-canvas);color:var(--color-ink);border:1px solid var(--color-hairline);height:48px;padding:0 var(--space-lg);font-size:16px;font-weight:500;letter-spacing:-.01em;border-radius:var(--rounded-pill)}.btn-secondary:hover:not(:disabled){background:var(--color-canvas-soft);border-color:var(--color-hairline-strong);box-shadow:var(--shadow-2)}.btn-on-dark{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.3)}.btn-on-dark:hover:not(:disabled){background:#ffffff1a;border-color:#ffffff80;color:#fff}.btn-ghost{background:transparent;color:var(--color-body);padding:var(--space-xs) var(--space-md);border-radius:var(--rounded-pill-sm);font-size:14px}.btn-ghost:hover:not(:disabled){background:var(--color-canvas-soft);color:var(--color-ink)}.btn-sm{height:36px;padding:0 var(--space-md);font-size:14px}.btn-lg{height:56px;padding:0 var(--space-xl);font-size:18px;gap:var(--space-sm)}.btn:focus-visible{outline:2px solid var(--color-link);outline-offset:2px;border-radius:var(--rounded-sm)}.card-marketing{background:var(--color-canvas);color:var(--color-ink);padding:var(--space-lg);border-radius:var(--rounded-md);box-shadow:var(--shadow-3);border:1px solid var(--color-hairline);transition:box-shadow var(--transition-normal),border-color var(--transition-normal)}.card-marketing:hover{box-shadow:var(--shadow-4);border-color:var(--color-hairline-strong)}.card-marketing-large{background:var(--color-canvas);color:var(--color-ink);padding:var(--space-xl);border-radius:var(--rounded-lg);box-shadow:var(--shadow-4);border:1px solid var(--color-hairline);transition:box-shadow var(--transition-normal),border-color var(--transition-normal)}.card-marketing-large:hover{box-shadow:var(--shadow-5);border-color:var(--color-hairline-strong)}.card-soft{background:var(--color-canvas-soft);color:var(--color-ink);padding:var(--space-lg);border-radius:var(--rounded-md);box-shadow:var(--shadow-2);border:1px solid var(--color-hairline);transition:box-shadow var(--transition-normal),border-color var(--transition-normal)}.card-soft:hover{box-shadow:var(--shadow-3);border-color:var(--color-hairline-strong)}.card-template{background:var(--color-canvas);color:var(--color-ink);padding:var(--space-md);border-radius:var(--rounded-md);box-shadow:var(--shadow-2);border:1px solid var(--color-hairline);transition:box-shadow var(--transition-normal),border-color var(--transition-normal)}.card-template:hover{box-shadow:var(--shadow-3);border-color:var(--color-hairline-strong);background:var(--color-canvas-soft-2)}.card-pricing{background:var(--color-canvas);color:var(--color-ink);padding:var(--space-xl);border-radius:var(--rounded-lg);box-shadow:var(--shadow-4);border:1px solid var(--color-hairline)}.card-pricing-featured{background:var(--color-primary);color:var(--color-on-primary);padding:var(--space-xl);border-radius:var(--rounded-lg);box-shadow:var(--shadow-5)}.card-code-editor{background:var(--color-primary);color:var(--color-on-primary);padding:var(--space-lg);border-radius:var(--rounded-md);font-family:var(--font-mono);font-size:13px;line-height:1.54}.badge{letter-spacing:.02em;text-transform:uppercase}.badge-secondary{background:var(--color-canvas-soft);color:var(--color-body);border:1px solid var(--color-hairline)}.badge-primary{background:var(--color-primary);color:var(--color-on-primary)}.badge-success{background:color-mix(in srgb,var(--color-success) 10%,transparent);color:var(--color-success);border:1px solid color-mix(in srgb,var(--color-success) 20%,transparent)}.badge-warning{background:var(--color-warning-soft);color:var(--color-warning-deep);border:1px solid color-mix(in srgb,var(--color-warning) 20%,transparent)}.badge-error{background:var(--color-error-soft);color:var(--color-error-deep);border:1px solid color-mix(in srgb,var(--color-error) 20%,transparent)}.badge-outline{background:transparent;color:var(--color-body);border:1px solid var(--color-hairline-strong)}.badge-sm{padding:0 var(--space-xs);font-size:11px}.badge-md{padding:0 var(--space-sm);font-size:12px;line-height:16px}.tool-card:hover{border-color:var(--color-hairline-strong)!important}.tool-card:hover .card-arrow{transform:translate(4px)}